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只 需要 少量 的 网 站 开发 编程 经 验 。 LU 
基础 知识 + 核心 技术 + 框架 延伸 。 
本 书 为 每 一 个 介绍 的 知识 点 都 配备 了 实例 说 明 。 


光盘 中 包含 本 书 所 有 实例 的 源 代 码 。 
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前 言 


本 书 是 一 本 由 浅 入 深 、 系 统 地 介绍 jQuery Mobile 移动 网 站 开发 知识 的 指导 书 。 
1. 针对 初级 读者 


本 书 的 内 容 和 实例 是 为 具有 网 页 开发 初步 经 验 ， 并 对 开发 移动 网 页 有 兴趣 的 读者 设计 的 。 
本 书 在 写作 中 力求 从 最 基础 的 概念 开始 讲解 ， 逐 步 展开 jQuery Mobile 中 各 种 技术 的 实际 应 用 
方法 ， 并 在 整体 介绍 jQuery Mobile 框架 以 后 ， 对 常用 的 定制 与 扩展 方法 做 进一步 的 介绍 。 

本 书 为 所 介绍 的 每 一 个 知识 点 都 配备 实例 ， 用 于 更 具体 地 说 明 以 下 几 个 方面 : 

@ ”典型 的 应 用 方法 。 

@ ”技术 重点 。 

e@ 容易 混淆 的 技术 难点 。 

本 书 的 实例 中 包含 jQuery Mobile 网 页 、HTML 5 网 页 、CSS 3 代码 和 少量 的 配置 文件 。 所 
有 的 HTML 5 和 CSS 3 代码 都 通过 了 语法 验证 ， 可 确保 其 符合 HTML 5 和 CSS 3 规范 。 

作者 建议 读者 在 编写 代码 的 过 程 中 尽 可 能 地 让 网 页 代码 遵循 HTML 5 和 CSS 3 的 语法 规 
范 。 刚 刚 开 始 学 习 网 页 设计 的 读者 ， 从 起 步 阶段 就 应 当 养 成 良好 的 代码 编写 习惯 。 同 时 ， 本 书 
的 前 4 章 对 网 页 设计 人 员 必 须 具备 的 基础 知识 进行 了 强化 。 

另外 ， 本 书 为 读者 提供 了 配套 光盘 ， 光 盘 中 含有 本 书 所 有 实例 的 源 代码 。 每 一 章 的 实例 都 
包含 运行 这 些 实例 所 需要 的 程序 库 ， 分 别 安排 在 各 自 的 目录 中 ， 读 者 可 以 根据 需要 ， 把 各 章 实 
例 单 独 部 署 到 服务 器 中 进行 测试 。 

2. 知识 妥善 划分 


本 书 在 内 容 安 排 上 分 为 三 个 部 分 : 

@ ”学 习 jQuery Mobile 的 必 备 知识 (前 提 条 件 )。 

@ jQuery Mobile 的 核心 知识 。 

@ ”jQuery Mobile 框架 的 延伸 知识 。 

通常 ， 在 讲解 ]Query Mobile 的 时 候 ， 会 把 注意 力 集中 到 jQuery Mobile 框架 本 身 。 作 者 并 
不 反对 这 样 突出 重点 的 讲解 ， 但 在 实际 开发 的 过 程 中 ， 就 会 发 现 ， 许 多 基本 概念 还 需要 重新 加 
深 理解 ， 这 其 中 包括 对 HTML 5 的 语法 特点 和 使 用 方法 的 理解 、 对 jQuery 与 jQuery Mobile 的 
关系 的 理解 ,尤其 是 对 事件 处 理 方法 差异 的 理解 ， 以 及 对 样式 与 U[ 组 件 的 定制 方法 的 理解 等 。 
对 以 上 这 些 基 本 概念 的 熟悉 程度 ， 会 对 项 目 完成 的 质量 产生 相当 大 的 影响 。 本 书 特意 安排 了 4 
章 基 础 知识 ， 作 为 学 习 jQuery Mobile 的 引导 。 

另 一 方面 ,jQuery Mobile 框架 的 扩展 ， 相 关 的 方法 在 项 目 开 发 中 十 分 重要 ， 但 由 于 其 中 很 
大 一 部 分 内 容 并 非 出 自 jQuery Mobile 的 标准 定制 方法 ， 而 常常 被 忽略 。 

本 书 以 讨论 的 方式 介绍 一 些 行 之 有 效 的 扩展 方法 。 同 时 , 作者 在 介绍 这 些 扩展 方法 的 时 候 ， 
都 会 提醒 读者 有 关 软 件 版 权限 制 、 软 件 版 本 兼容 性 等 问题 。 作 为 延伸 方案 的 讨论 ， 本 书 通过 实 
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例 介绍 各 种 用 于 选择 和 评估 扩展 方案 的 方法 ， 这 是 本 书 的 一 个 要 点 。 对 于 方案 评价 方法 的 掌握 
比 熟悉 几 种 插件 重要 得 多 。 

对 于 jQuery Mobile 框架 本 身 ， 本 书 采 用 了 常用 的 技术 分 类 方法 ， 但 是 ， 对 于 个 别 技术 ， 
比如 自 定义 样式 ， 则 需要 与 其 他 相关 的 自 定义 方法 一 起 讲解 。 

3. 总 体 结构 导读 


本 书 的 内 容 按 照 学 习 jQuery Mobile 的 各 个 知识 点 之 间 的 相互 依赖 关系 进行 顺序 排列 。 

第 一 部 分 是 学 习 jQuery Mobile 之 前 必须 掌握 的 基本 知识 ， 包 括 第 1~4 章 ， 介 绍 移动 Web 
的 特点 、 用 户 界面 设计 原则 、HTML 5 和 CSS 3 语法 ， 以 及 jQuery 入 门 。 

第 二 部 分 为 jQuery Mobile 的 核心 知识 ， 包 括 第 5~8 章 、 第 9 章 的 大 部 分 ， 以 及 第 11 章 。 
这 一 部 分 详细 介绍 jQuery Mobile 框架 范畴 内 的 各 种 开发 方法 和 技巧 。 

第 三 部 分 可 以 视 为 延伸 阅读 内 容 ， 包 括 第 9 章 的 一 小 部 分 、 第 10~12 章 ， 介 绍 对 jQuery 
Mobile 框架 功能 的 扩充 ， 包 括 事件 处 理 及 插件 等 。 

4. 各 章 内 容 简 介 

本 书 的 章节 安排 充分 考虑 了 初学 者 循序 渐进 地 学 习 的 要 求 。 

第 1 章 : 移动 Web 开发 简介 。 系 统 地 介绍 移动 Web 的 技术 发 展 史 ， 由 此 引出 以 HTML 5 
和 CSS 3 为 主导 的 网 页 设计 方法 ， 以 及 在 技术 演化 过 程 中 出 现 的 设计 策略 ,包括 这 些 策略 对 当 
前 网 页 设计 的 影响 。 

第 2 章 : HTML 5 开发 基础 。 介 绍 HTML 入 门 知 识 ， 适 用 于 HTML 初学 者 和 对 HTML 5 
中 各 种 新 的 语法 特性 和 新 的 开发 思想 还 不 是 很 了 解 的 读者 。 

第 3 章 : CSS 3 设计 基础 。 介绍 CSS 3 的 入 门 知识 , 适用 于 CSS 初学 者 和 对 CSS 3 中 各 种 
2D/3D 效果 还 不 是 很 了 解 的 读者 。CSS 3 将 在 jQuery Mobile 的 各 种 定制 方法 中 大 量 使 用 。 

第 4 章 : jQuery 入 门 。 简 要 介绍 jQuery。 读 者 需要 注意 第 3 章 中 的 CSS 选择 器 与 第 4 章 
中 jQuery 选择 器 的 关系 。 另 外 ， 理 解 页 面 加 载 的 时 序 问 题 和 掌握 jQuery 提供 的 各 种 方法 对 于 
后 续 章 节 的 学 习 十 分 重要 。 

第 5 章 : jQuery Mobile 开发 基础 。 对 jQuery Mobile 框架 做 整体 介绍 ， 并 初步 介绍 jQuery 
Mobile 框架 的 大 致使 用 方法 。 

第 6 章 : UI 组件 -工具 栏 。 介 绍 移动 网 页 的 总 体 页 面 布局 ， 以 及 与 页 头 和 页 尾 相 关 的 开发 
技巧 。 

第 7 章 : jQuery Mobile 的 三 组件。 介绍 jQuery Mobile 中 的 基本 UI 组 件 ， 包 括 图 标 、 按 
钮 、 各 种 表单 元 素 、 表 格 和 网 格 等 。 

第 8 章 : jQuery Mobile 的 UI 组 件 ( 续 )。 延 续 第 7 章 的 内 容 ， 对 jQuery Mobile 框架 中 比较 
复杂 的 UI 组 件 进 行 详细 的 介绍 ， 包 括 滑动 条 、 列 表 视图 、 菜 单 、 面 板 等 。 

第 9 章 : jQuery Mobile 的 样式 定制 。 样 式 主题 是 保证 整个 网 站 风格 统一 的 一 种 有 效 手段 。 
这 一 章 从 jQuery Mobile 的 样式 系统 、 样 式 定制 工具 的 使 用 方法 ， 到 非 标准 的 样式 风格 定制 方 
法 等 做 一 个 综合 性 的 说 明 。 

第 10 章 : jQuery Mobile 功能 的 扩展 。 从 实际 项 目 开发 需要 出 发 ， 探 讨 扩展 jQuery Mobile 
框架 功能 的 不 同方 法 。 这 些 方法 包括 扩展 图 标 集 、 扩 展 网 页 过 渡 动 画 效果 、 借 助 已 有 的 jQuery 
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UI 等 软件 对 jQuery Mobile 进行 功能 扩展 的 方法 。 

第 11 章 : jQuery Mobile 事件 处 理 。 事 件 处 理 是 jQuery 和 jQuery Mobile 中 的 重要 一 环 。 
在 jQuery Mobile 中 ， 常 常 需要 借助 于 事件 处 理 ， 来 达到 在 静态 条 件 下 难以 实现 的 目的 。 

第 12 章 : jQuery 和 jQuery Mobile 的 插件 。 作 为 延伸 阅读 的 部 分 , jQuery 和 jQuery Mobile 
的 插件 从 一 个 完全 独立 的 角度 完善 了 jQuery Mobile 的 功能 ， 例 如 ，Google 地 图 就 是 一 个 对 于 
常规 移动 应 用 非常 有 效 的 补充 。 


移动 Web 正在 进入 一 个 窑 新 的 发 展 时 期 ， 新 的 技术 和 开发 理念 层出不穷 ， 新 的 知识 需要 
不 断 学 习 。 欢 迎 读者 针对 本 书 涉及 的 编程 方法 与 作者 讨论 。 对 书 中 的 错误 ， 敬 请 批评 指正 。 
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移动 Web 开 发 简介 


本 章 导读 : 


本 章 将 介绍 移动 Web 及 其 相关 技术 的 背景 和 特点 ， 使 读者 能 从 技术 特点 来 了 
解 不 同类 型 软件 在 设计 、 开 发 和 应 用 方面 的 差别 ， 这 对 于 合理 地 设计 移动 Web 会 
有 极 大 的 帮助 ， 并 且 有 利于 理解 jQuery Mobile 框架 本 身 的 设计 思路 ， 在 后 续 章节 
中 逐步 领会 jQuery Mobile 网 页 开发 涉及 的 设计 原理 。 

本 章 不 过 多 地 讨论 技术 细节 。 需 要 学 习 HIML 5、CSS 3， 以 及 jQuery 的 读者 
可 在 阅读 本 章 后 继续 阅读 其 他 预备 知识 章节 。 


UD jQuery Mobile 移 动 网 站 开发 


1.1 移动 Web 的 发 展 


1.1.1 WAP 时 代 


在 移动 设备 上 的 Web 开发 可 以 追溯 到 1996 年 前 后 Unwired Planet 公司 (前 身 为 Libris 公司 ) 
开发 的 一 套 HDML 标记 语言 。HDML 是 Handheld Device Markup Language 的 缩写 ， 意 思 是 手 
持 式 设 备 的 标记 语言 。 顾 名 思 义 ，HDML 着 眼 于 手机 等 移动 设备 上 的 浏览 器 及 网 页 应 用 。 虽 然 
Unwired Planet 公司 将 HDML 发 送 到 W3C(World Wide Web Consortium， 万 维 网 联盟 )， 和 希望 它 
成 为 行业 技术 标准 ， 但 是 ， 实 际 上 尽管 HDML 取得 了 一 定 范围 内 的 成 功 ， 却 并 没有 最 终 形成 
技术 规范 。 

1997 年 ，Unwired Planet 公司 (后 来 改名 为 Phone.com， 
其 后 又 再 次 更 名 为 Openwave) 与 Ericsson、Motorola、Nokia 
等 公司 成 立 了 WAP Forum 标准 组 织 , 致力 于 WAP(Wireless 
Application Protocol, 无 线 应 用 协议 ) 技 术 的 研发 。WAP 包含 
了 一 系列 技术 标准 ， 其 中 包括 由 HDML 发 展 而 来 的 WML 
(Wireless Markup Language， 无 线 标记 语言 )。WAP/WML 是 
手机 浏览 器 和 网 页 技术 的 一 个 重大 的 里 程 碑 , 它 确立 了 移动 
浏览 器 的 行业 标准 , 并 提出 了 在 无 线 网 页 设计 方面 的 一 系列 
问题 的 探讨 。 包 括 普通 网 页 与 移动 网 页 在 设计 以 及 应 用 上 的 
重要 区 别 ， 以 及 在 当时 无 线 Internet 网 速 慢 并 且 稳定 性 较 差 
等 局 限 性 条 件 下 对 于 网 站 性 能 优化 等 方面 的 思考 等 。 

图 1.1 中 , 通过 Openwave UP.SDK 4.1 中 的 模拟 器 演示 
了 一 个 简单 WML 网 页 在 Openwave 浏览 器 中 的 显示 方式 。 

从 中 可 以 看 到 ， 即 使 WML 和 WMLScript 能 够 满足 一 
般 业 务 流程 的 需要 , 但 由 于 受到 手机 显示 屏 大 小 、 色 彩 和 分 
辩 率 等 的 制约 ，WML 网 页 在 用 户 界面 设计 上 ， 往 往 只 能 是 
十 分 简单 的 。 

WML 与 HTML 不 同 ， 它 是 基于 XML 的 标记 语言 ， 语 法 严格 遵守 XML 标准 的 约束 。 这 

-设计 思路 使 当时 手机 运算 能 力 十 分 薄弱 的 处 理 器 上 避免 了 桌面 浏览 器 所 遇 到 的 问题 , 不 必 考 
虑 由 于 语法 不 严格 所 造成 的 大 量 用 于 HTML 语法 纠 错 的 运算 。 这 从 语法 严格 性 的 角度 保证 了 
移动 网 页 显示 的 效率 。 

WML 还 针对 当时 无 线 网 络 网 速 慢 的 弱点 ， 引 进 了 Deck/Card 的 概念 。Deck 就 像 一 副 扑 克 
牌 ， 内 部 包含 了 一 张 或 多 张 牌 ， 即 Card， 而 每 一 个 Card 代表 了 一 个 在 浏览 器 中 显示 的 页 面 。 

-个 WML 文件 对 应 于 一 个 Deck。 浏览 器 一 次 下 载 一 个 WML 文件 , 相当 于 一 次 下 载 了 包含 在 
同一 个 Deck 中 的 多 张 扑克 牌 。 图 1.2 演示 了 一 个 含有 三 个 页 面 的 WML 网 页 与 页 面 之 间 的 跳 
转 过 程 。 在 同一 个 Deck 内 的 页 面 切换 ， 不 需要 另行 下 载 其 他 网 页 文件 。 只 有 当 从 任何 一 个 页 
面 中 跳 转 到 另 一 个 Deck 上 的 页 面 时 , 才 需 要 下 载 另 外 一 个 WML 文件 。 Deck/Card 是 一 个 非常 
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1.1 在 Openwave 浏览 器 中 
显示 的 WML 网 页 


第 1 瘟 移动 Web 开发 简介 


有 用 的 概念 ， 在 jQuery Mobile 移动 Web 开发 中 仍然 能 够 看 到 它 的 影子 。 


Card1 Card2 Card3 


1.2 一 个 具有 三 个 Card( 页 面 ) 的 Deck 及 其 页 面 之 间 的 跳 转 过 程 


随 着 移动 互联 网 应 用 的 发 展 ， 许 多 技术 标准 研发 组 织 各 自 开发 属于 各 自 领 域 的 技术 规范 。 
为 了 响应 业界 的 开放 平台 、 互 操作 性 、 行 业 标准 化 等 呼声 ，2002 年 成 立 了 成 员 公司 所 涉 行业 更 
为 广泛 的 标准 组 织 OMA(Open Mobile Alliance， 开 放 移动 联盟 )。OMA 的 成 员 进一步 包括 了 
Philips、 Samsung、 LG、 Oracle、 IBM、 Sun、Microsoft、 TI、Research in Motion( 后 改名 为 Blackberry)、 
Symbian、Vodafone、T-Mobile 和 其 他 移动 设备 制造 商 、 无 线 营 运 商 、 软 件 公 司 等 。 

伴随 WAP Forum 成 员 成 为 OMA 的 成 员 ，WAP 浏览 技术 标准 被 重新 归 类 为 “移动 浏览 器 
及 其 内 容 ”， 新 的 WAP 2.0 标准 在 OMA 的 框架 下 研发 ， 并 达到 了 一 个 新 的 里 程 碑 。 

与 WAP 1.x 完全 不 同 , WML 标记 语言 在 WAP 2.0 被 放弃 ,取而代之 的 是 XHTML 系列 标 
记 语 言 。XHTML 语法 除了 仍然 要 求 严格 遵守 XML 规范 外 ， 其 他 方面 与 HTML 非常 类 似 ， 这 
大 大 方便 了 Web 设计 人 员 开 发 无 线 网 站 ， 顺 应 了 W3C 推动 HTML 向 XHTML 发 展 的 要 求 。 


WAP 2.0 网 页 和 浏览 器 技术 在 发 展 中 经 历 了 几 次 争 
论 , 主要 是 由 于 XHTML 本 身 更 适应 桌面 Web 的 需要 , 而 
不 适合 小 屏幕 浏览 器 的 特点 和 “ 软 键盘 ”的 需要 。 经 过 精 
简 的 XHTML Basic 剔除 了 XHTML 中 不 适用 于 手机 等 无 
线 设 备 的 标签 ， 但 是 它 仍 然 不 具备 无 线 设备 特殊 需要 的 一 
些 功 能 。 在 XHTML Basic 的 基础 上 ,XHTML Mobile Profile 
( 常 被 简称 为 XHTML-MP) 应 运 而 生 了 。 

图 1.3 演示 了 在 Openwave SDK 6.22 中 的 模拟 器 上 显 
示 XHTML-MP 中 的 标准 HTML 标签 时 的 情形 。 

WAP 2.0 引 入 了 桌面 Web 常用 的 CSS, 使 移动 网 页 的 
用 户 界面 设计 水 平 达到 了 一 个 新 的 高 度 ， 但 是 ，WAP 2.0 
取消 了 对 Script 语言 的 支持 ， 即 XHTML-MP 中 不 再 包含 
<scripf> 标 签 ， 使 桌面 Web 和 WAP 中 常用 的 JavaScript 和 
WMLScript 都 不 再 被 支持 。 

WAP 在 早期 具有 Internet 接 入 能 力 的 手机 上 非常 流 
行 。 它 在 屏幕 布局 、 菜 单 和 按钮 的 使 用 方式 等 方面 对 


图 1.3 在 Openwave 浏览 器 中 
显示 XHTML-MP 网 页 
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J2ME(Java ME)、Blackberry 等 移动 应 用 程序 产生 了 深远 的 影响 。Blackberry(BB OS 6)， 以 及 支 
持 Java ME 等 的 手机 仍然 保留 了 对 WAP 的 支持 。 

在 手持 式 设备 浏览 器 研发 中 ， 占 据 重 要 地 位 的 Openwave 公司 曾 一 度 占有 无 线 浏览 器 的 半 
数 市 场 份额 。 随 着 智能 手机 市 场 的 成 熟 ，WAP 正 逐 步 退出 历史 舞台 。Openwave 公司 经 过 若干 
次 并 购 和 业务 重组 后 ， 于 2012 年 重新 更 名 为 Unwired Planet， 主 要 从 事 自主 知识 产权 技术 的 研 
发 和 专利 权 授 权 等 业务 。 


1.1.2 HTML 5 时 代 


现在 ， 很 多 网 站 声称 是 使 用 HTML 5 开发 的 ， 很 多 浏览 器 声称 支持 HTML 5。 这 似乎 是 一 
个 HIML 5 大 行 其 道 的 年 代 。 但 是 , 回顾 HTML 发 展 史 ， 却 可 以 看 到 ，HTML 5 的 产生 和 发 展 
曾经 颇 费 了 一 番 周 折 。 

1997 年 底 , HTML 4.0 技术 标准 定稿 并 发 布 。 两 个 月 后 , W3C 的 另 一 项 重要 成 果 XML 1.0( 第 

-版 ) 正 式 发 布 2>。 当 HTML 4.0 正式 发 布 后 ，W3C 随 即 停止 了 HTML 工 作 组 的 工作 。W3C 经 过 
短暂 的 讨论 后 认为 , HTML 的 未 来 发 展 方向 是 成 为 一 个 XML 应 用 。 然 后 , W3C 重 新 召集 了 HTML 
工作 组 , 并 且 开 始 了 把 HTML 向 XML 方 向 发 展 的 研究 工作 ， 并 于 1998 年 底 正式 公布 了 XHTML 
1.0 规范 。 

XHTML 1.0 在 网 页 开发 中 的 应 用 ， 加 深 了 技术 使 用 不 规范 的 矛盾 。 即 使 在 今天 ， 绝 大 多 
数 商业 网 站 的 网 页 也 是 无 法 通过 语法 验证 的 。 也 就 是 说 ， 绝 大 多 数 今 天 的 网 站 或 多 或 少 地 使 用 
了 不 正确 的 HTML 语 法 。 而 Web 浏 览 器 在 早期 设计 的 时 候 ， 就 保持 了 很 高 的 宽容 度 ， 对 于 错误 
的 语法 ,在 一 般 情 况 下 并 不 提示 ， 网 页 往往 仍然 能 够 正常 显示 。 这 种 宽容 度 与 XML 对 于 语法 的 
严格 限制 显得 格格 不 入 。W3C 早 在 HIML 4.0 推出 时 ， 就 准备 把 严格 的 XML 语法 要 求 应 用 到 
HTML 中 ， 即 一 旦 浏览 器 通过 网 页 文档 的 MIME 类 型 识别 到 网 页 是 按 XHTML 开 发 8， 就 会 遵循 
XML 的 要 求 严 格 验证 XML 文档 的 有 效 性 。 如 果 发 现 错误 ， 就 要 按照 XML 的 方式 提示 错误 ， 网 
页 将 不 被 处 理 。 可 是 在 实际 工作 中 ，W3C 的 这 个 设想 却 是 根本 无 法 实现 的 。 因 为 如 果 网 页 的 
MIME 类 型 被 设置 为 传统 的 网 页 类 型 8， 则 网 页 中 第 一 行 通过 DOCTYPE 声 明 的 网 页 格式 类 型 将 
被 忽略 。 即 使 网 页 中 已 经 声明 为 XHTML 文档 ， 但 仍然 会 被 按照 普通 的 HTML 网 页 处 理 。 这 样 ， 
浏览 器 并 不 会 按照 W3C 设 想 的 那样 做 文档 有 效 性 的 验证 ，XHTML 的 意义 也 就 大 大 降低 了 。 
W3C 的 原始 设想 还 有 一 个 很 大 的 缺陷 ， 就 是 如 果 设 想 真 的 实现 ， 世 界 上 绝 大 部 分 被 声明 为 
XHTML 的 网 页 根本 无 法 通过 语法 有 效 性 验证 。 那 么 这 些 网 站 会 在 一 夜 之 间 突 然 失效 ， 无 法 在 
使 用 W3C 新 标准 的 浏览 器 中 打开 ， 后 果 是 相当 严重 的 。 

在 Mozilla 和 Opera 公司 中 , 一 群 致 力 于 HTML 技术 发 展 的 研发 人 员 在 2004 年 W3C 的 一 
次 技术 会 议 中 提出 了 新 的 设想 ， 它 充分 考虑 了 向 早期 HTML 版 本 的 兼容 性 。 这 个 设想 还 提出 
了 桌面 浏览 器 和 移动 设备 浏览 器 中 的 user-agent 应 该 基于 相同 的 特性 的 观点 。 这 个 设想 就 是 
HTML 5 的 雏形 ， 但 由 于 与 其 他 相关 技术 的 衔接 问题 ， 暂 时 无 法 解决 ，W3C 在 会 议 表 决 中 没有 


@ 自从 1998 年 2 月 XML 1.0 第 一 版 发 布 以 后 ， 截 至 2007 年 ，XML 1.0 共 发 布 了 5 个 修订 版 。 
@ XHTML 的 MIME 类 型 是 application/xhtml+xml。 
@ 普通 网 页 的 MIME 类 型 是 text/html。 
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接受 这 个 设想 。 为 了 实现 这 个 新 的 设想 ， 这 些 研发 人 员 自 行 成 立 了 非 正 式 的 WHAT 工作 组 ， 
对 新 的 技术 进行 独立 研发 。 而 在 相同 的 时 候 ，W3C 继续 进行 着 XHTML 2.0 的 研发 。 

WHAT 工作 组 充分 理解 W3C 对 于 网 页 中 语法 使 用 不 规范 而 造成 浏览 器 开发 商 在 页 面容 错 
处 理 中 的 兼容 性 问题 的 顾虑 。WHAT 编 写 了 完整 的 有 关 页 面 显示 的 规范 ， 这 个 规范 规定 了 浏览 
器 对 正确 语法 的 解析 和 对 于 语法 错误 使 用 中 的 错误 处 理 方式 。 这 个 网 页 解析 规则 很 大 程度 地 解 
决 了 网 页 在 不 同 浏览 器 中 的 兼容 性 问题 ?2。WHAT 工 作 组 对 于 HTML 的 改进 还 在 于 对 多 媒体 的 
内 在 支持 ， 而 不 需要 另行 安装 插件 等 。 

在 W3C 的 XHTML 2.0 技术 和 WHAT 工作 组 的 新 版 HTML 分 别 研发 的 过 程 中 ，W3C 意 
识 到 了 W3C 关于 把 HTML 全 面 转向 XHTML 的 设想 并 不 受 欢 迎 ， 并 且 WHAT 工作 组 对 于 
HTML 的 研发 已 经 走 到 了 W3C 的 前 面 ， 因 此 ，W3C 在 2006 年 10 月 决定 与 WHAT 工作 组 合 
作 ， 组 成 新 的 HTML 工作 组 ， 并 让 HTML 工作 组 与 W3C 的 XHTML 2.0 研发 团队 并 行 工作 。 

3 年 后 ，W3C 决定 彻底 停止 XHTML 2.0 工作 组 的 运作 。 同 时 ，HTML 工作 组 正式 给 新 版 
HTML 定名 为 HTML 5。HTML 5 终于 赢得 了 标准 化 之 争 的 重大 胜利 。 XHTML 2.0 最 终 成 为 一 
个 没有 能 够 实现 的 理想 。 

HTML 5 引起 大 众 的 广泛 关注 缘起 于 已 故 的 前 Apple 首席 执行 官 乔布斯 在 2010 年 4 月 发 
表 的 有 关 Flash 技术 的 一 段 观 点 。 乔布斯 认为 HTML 5 是 移动 应 用 时 代 的 新 技术 , 并 明确 表示 ， 
在 与 Flash 技术 的 竞争 中 ，HTML 5 将 最 终 胜 利 。 

现在 很 多 智能 手机 和 平板 电脑 都 声称 他 们 的 浏览 器 支持 HTML 5， 但 是 ， 在 本 书写 作 时 
HTML 5 并 不 是 一 个 真正 的 技术 标准 。HTML 5 技术 规范 目前 发 表 的 是 候选 版 而 非 正式 版 。 技 
术 浏 览 器 宣称 支持 HTML 5， 但 实际 上 ， 浏 览 器 只 是 支持 HIML 5 中 的 绝 大 部 分 功能 ， 而 不 是 
候选 标准 版 本 中 所 规定 的 全 部 内 容 。WHAT 工作 组 采用 的 是 一 种 渐进 成 熟 式 的 工作 模式 , 其 中 
某 些 模块 可 能 先 于 其 他 模块 实现 技术 成 熟 ， 而 在 技术 上 趋 于 稳定 的 模块 可 以 单独 被 浏览 器 实 
现 。WHAT 工作 组 预计 的 开发 周期 是 从 2004 年 起 的 18~20 年 ， 即 2022 年 前 后 才能 形成 最 终 
的 技术 标准 。 因 此 , 现在 市 场 主 流 浏 览 器 对 HIML 5 的 支持 方式 正 是 WHAT 工作 组 所 推荐 的 。 

从 理论 角度 ， 或 者 从 应 用 实践 角度 来 看 ，HTML 5 对 于 其 设计 目标 的 最 终 实 现 有 一 定 的 争 
议 。 但 是 它 对 浏览 器 和 网 页 标记 语言 技术 的 整合 和 统一 做 出 了 重要 的 贡献 。 


1.2 移动 Web 的 特点 和 设计 策略 


1.2.1 ”移动 Web 和 移动 应 用 程序 


当 用 户 在 使 用 手机 和 平板 电脑 时 ， 可 以 明确 意识 到 屏幕 上 的 图 标 能 够 启动 一 段 应 用 程序 ， 
浏览 网 页 则 必须 首先 打开 浏览 器 。 移 动 设备 上 的 本 地 应 用 程序 由 移动 平台 的 API 开 发 而 来 ， 而 


@ 网 页 显示 的 兼容 性 问题 在 目前 条 件 下 并 不 能 完全 解决 。 比如 ,Firefox 和 Internet Explorer 对 于 盒 模型 就 分 别 
接受 了 两 种 不 同 的 定义 方式 。 这 些 在 技术 标准 解释 上 的 细微 不 同 , 造成 了 屏幕 组 件 在 间距 和 内 部 填充 等 方面 的 
先天 差异 。 
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浏览 器 中 的 网 页 是 由 标记 语言 开发 而 来 9。 除 了 技术 背景 的 不 同 ， 这 两 类 程序 还 有 以 下 显著 的 
差别 。 

1. 菜单 键 的 使 用 

早期 的 WAP 浏览 器 使 用 软 键 (softkey) 来 操作 网 页 上 的 菜单 ， 而 早期 的 WML 等 标记 语言 
充分 考虑 了 手机 键盘 和 手机 网 页 中 菜单 的 特点 ， 对 于 菜单 的 定制 和 操作 功能 是 相当 完善 的 。 如 
图 14 所 示 ， 一 个 WAP 浏览 器 通过 左右 两 个 功能 键 来 操作 网 页 中 可 定制 的 菜单 。 类 似 的 操作 
方式 在 Java ME 应 用 程序 中 也 能 得 到 体现 ， 如 图 1.5 所 示 。 


图 1.4 WAP 手 机 中 通过 左右 功能 键 图 1.5 Java ME 程序 通过 手机 上 的 左右 
选择 WAP 网 页 中 的 菜单 功能 键 选 择 菜单 选项 
随 着 移动 Web 的 发 展 ， 尤 其 是 智能 手机 软 硬 件 的 发 展 ， 功 能 键 逐 渐 被 菜单 按钮 等 取代 。 
比如 Blackberry 上 的 匡 一 按钮 ， 或 者 Android 上 的 国 以 双 国 拉锯 等 。 
菜单 按钮 同样 作用 于 应 用 程序 和 网 页 ， 但 是 ， 应 用 程序 能 够 用 API 来 定制 菜单 ， 而 网 页 对 
于 菜单 内 容 的 影响 却 是 十 分 有 限 的 。 
2. 移动 平台 特性 的 利用 


每 一 种 移动 平台 ， 不 论 是 Java ME、Blackberry、iOS， 还 是 Android， 都 有 相应 的 API， 用 
于 开发 与 相应 移动 平台 匹配 的 应 用 程序 。 

移动 平台 的 API 提供 了 程序 员 充 分 发 挥 移动 设备 硬件 特性 的 可 能 。 移 动 设 备 的 硬件 结构 往 
往 能 够 绑 定 特殊 的 事件 侦 听 程序 ， 比 如 部 分 型 号 的 早期 Blackberry 智能 手机 在 侧面 装 有 滚动 按 
钮 ， 部 分 手机 在 面板 上 设计 有 返回 按钮 、 触 摸 屏 、GPS、 电 池 、 姿 态 (orientation) 感 应 等 。 对 应 
于 以 上 硬件 特点 ， 移 动 平台 的 API 能 够 触发 相应 的 事件 ， 并 且 进 而 启动 与 之 匹配 的 处 理 程序 。 
越 来 越 多 新 型 号 的 智能 手机 和 Java ME 手机 现在 已 经 能 够 利用 手机 中 的 SIM 卡 ,实现 NFC(Near 
Field Communication) 功 能 ， 这 同样 依赖 于 设备 硬件 特性 和 移动 平台 所 提供 的 API。 

这 些 API 同样 加 强 了 移动 设备 所 能 得 到 的 服务 。 比 如 ，API 往往 能 够 提供 多 种 网 络 访问 功 
能 ， 包 括 Socket、Web 服务 ， 甚 至 把 移动 设备 本 身 变 成 一 个 服务 器 。 强 化 的 网 络 访问 能 力 使 得 


@ 除了 移动 应 用 程序 和 移动 Web 两 种 开发 模式 以 外 , 还 有 很 多 能 够 在 一 定 程度 上 实现 跨 平台 开发 的 工具 以 及 
HTML 5 应 用 程序 等 。 这 些 开发 模式 由 于 技术 成 熟 度 和 应 用 方面 的 局 限 性 ， 本 书 不 做 探讨 。 
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游戏 程序 和 商用 程序 能 够 更 好 地 被 多 种 网 络 协议 支持 ， 提 高 网 络 通信 的 效率 和 安全 性 。 同 样 依 
赖 于 网 络 的 支持 ，API 能 够 使 用 Push 技术 ， 并 能 够 与 短信 、 语 音 电 话 等 通信 方式 集成 。 移 动 
平台 的 API 还 能 够 提供 本 地 持久 存储 的 功能 。 比 如 Java ME 的 RMS 功能 ，Blackberry 上 的 
Persistent Object， 或 者 其 他 智能 手机 上 借用 SQLite 实现 的 持久 存储 功能 等 。 

API 还 带 来 了 操作 上 的 便利 性 。 在 Blackberry 上 ， 可 以 通过 设置 输入 过 滤 等 方式 限定 输入 
字符 是 字母 或 者 是 数字 等 。 

这 些 在 用 户 输入 上 的 便利 , 其 实在 最 早 的 WML 上 已 经 实现 了 , 但 是 , 随 着 WML 向 HTML 
等 的 转变 ,部 分 早期 面向 手机 特点 的 设计 却 被 逐步 弱化 了 。 部 分 智能 手机 上 的 API 能 够 提供 类 
似 放大 镜 的 功能 ， 这 为 应 用 程序 界面 用 户 体验 的 提高 提供 了 保障 。 

另 一 个 很 容易 被 忽视 的 特点 是 , API 都 绑 定 了 应 用 程序 生命 周期 特定 的 函数 。 比 如 Android 
通过 任务 (task) 的 概念 , 能 够 删除 任务 堆栈 中 的 一 个 Activity( 此 处 可 以 理解 为 删除 一 个 先前 显示 
过 的 屏幕 )， 使 得 手机 的 Back 按钮 不 能 退回 到 上 一 个 屏幕 ， 而 浏览 器 的 屏幕 缓冲 机 制 却 比较 难 
于 实现 这 个 功能 。 


3. 安全 性 


网 页 与 服务 器 通信 可 以 通过 HTTPS 协议 加 密 通 信 的 内 容 ， 实 现 通信 内 容 的 安全 性 。 而 移 
动 应 用 程序 除了 能 够 通过 HTTPS 进行 通信 外 , 还 能 实现 非 通信 过 程 中 的 多 种 方式 数据 加 密 等 ， 
防止 数据 被 窃听 。 另 外 ，MDS5 完整 性 验证 可 以 确保 数据 没有 被 算 改 ， 而 对 本 地 持久 存储 的 数 
据 进 行 数据 共享 的 安全 设置 也 必须 通过 不 同 的 移动 平台 本 身 的 技术 特点 来 实现 。 

移动 应 用 程序 的 安全 性 还 体现 在 程序 的 安装 环节 上 。 比 如 提示 程序 发 布 者 的 身份 、 警 告 程 
序 可 能 会 使 用 到 的 网 络 功能 等 。 用 户 能 够 事先 知道 正在 安装 中 的 程序 会 带 来 的 风险 ， 并 能 够 选 
择 接受 风险 ， 继 续 使 用 ， 或 者 选择 拒绝 使 用 该 应 用 程序 。 


4. 离线 访问 


从 传统 意义 上 来 说 ，Web 是 依赖 于 Internet 的 在 线 应 用 程序 ， 而 由 移动 平台 API 开发 的 本 
地 应 用 程序 在 安装 以 后 能 够 不 依赖 于 网 络 。 这 种 情况 在 采用 HIML 5 开发 之 后 有 所 改变 。 

HTML 5 增加 了 对 缓冲 存储 的 控制 ， 使 HTML 5 能 够 类 似 普通 应 用 程序 那样 运行 。 对 于 静 
态 内 容 的 发 布 ， HTML 5 的 离线 访问 功能 或 许 比 本 地 应 用 程序 更 加 具有 优势 。 因 为 ， 当 HTML 
5 的 离线 网 页 检测 到 离线 控制 文件 在 服务 器 上 已 经 更 新 以 后 ， 会 自动 下 载 并 更 新 当前 的 内 容 ， 
而 不 需要 像 本 地 应 用 程序 那样 下 载 并 安装 整个 应 用 程序 。 

有 关 HIML 5 的 离线 功能 ， 可 参考 本 书 第 2 章 。 


5. 用 户 体验 的 一 致 性 


以 HTML 为 基础 的 网 页 只 要 设计 得 当 ， 在 浏览 器 中 就 比较 容易 获得 用 户 体验 的 一 致 性 。 
在 理想 状态 下 ， 同 一 个 网 页 文件 在 不 同 的 浏览 器 中 应 该 显示 出 近似 的 效果 。 而 以 移动 平台 特有 
的 API 开发 的 本 地 应 用 程序 在 充分 发 挥 硬件 特性 的 同时 ， 也 带 来 了 显示 方式 上 的 不 统一 等 问 
题 。 这 些 问 题 往往 表现 于 各 种 屏幕 元 素 ， 比 如 系统 菜单 、 下 拉 菜 单 、 按 钮 等 。 

使 用 HTML 网 页 ， 对 于 统一 用 户 界面 设计 、 减 少 开发 工作 量 、 减 少 维护 复杂 度 、 降 低 项 
目 成 本 等 多 方面 都 有 比较 重要 的 意义 。 另 外 ， 以 HTML 5 为 基础 的 Web 技术 ， 已 经 在 混合 型 
移动 应 用 程序 的 实践 中 被 广泛 接受 。 
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1.2.2 ”移动 Web 与 桌面 Web 


Web 在 移动 浏览 器 中 的 表现 方式 不 同 于 在 桌面 浏览 器 中 的 表现 方式 。 简 单 地 缩小 网 页 并 不 
是 完成 从 桌面 型 Web 向 移动 Web 转换 的 恰当 方法 。 移 动 网 页 的 设计 涉及 到 设计 思想 和 技术 及 
硬件 产品 发 展 两 方面 的 影响 。 

1. 界面 设计 上 的 制约 条 件 


移动 应 用 程序 与 Web， 或 者 移动 Web， 在 界面 设计 中 需要 考虑 的 问题 ， 除 了 菜单 键 的 使 
用 外 ， 还 存在 着 其 他 一 些 显 著 的 区 别 。 

由 于 受到 屏幕 大 小 的 制约 ， 在 移动 Web 网 页 上 出 现 滚动 条 是 十 分 常见 的 。 但 是 ， 在 屏幕 
设计 中 ， 应 该 尽量 避免 水 平 滚动 。 由 于 很 多 智能 手机 具有 姿态 感应 功能 ， 能 够 随 着 位 置 变化 ， 
改变 屏幕 显示 的 方向 , 页 面 布局 在 横向 设计 上 必须 更 多 地 考虑 , 避免 过 多 内 容 出 现在 同一 行 中 。 
同时 ,也 要 考虑 屏幕 上 横向 贯穿 的 屏幕 组 件 是 否 会 由 于 平板 电脑 等 设备 的 屏幕 太 宽 而 造成 页 面 
不 协调 。 

触摸 屏 在 移动 设备 中 的 普及 目前 远 远 超过 了 桌面 电脑 或 者 笔记 本 电脑 等 。 触 摸 屏 的 使 用 ， 
是 输入 设备 一 个 重大 的 革新 ， 它 能 够 用 我 们 的 手指 来 代替 鼠标 等 输入 设备 。 但 是 ， 用 手指 代替 
鼠标 ， 并 不 是 一 个 简单 的 替换 过 程 。 首 先 ， 手 指 不 具备 鼠标 上 的 滚轮 功能 ， 所 以 需要 用 滑动 来 
代替 滚动 其 次 ， 手 指 无 法 精确 点 击 屏 幕 上 的 一 个 细小 区 域 ， 因 此 ， 当 手机 等 移动 设备 使 用 触 
摸 屏 的 时 候 ， 要 求 屏幕 组 件 的 设计 应 该 比 普 通 网 页 上 的 屏幕 元 素 大 一 些 ， 以 便于 用 户 点 击 。 

图 1.6 演示 了 一 个 普通 网 页 中 的 单 选 按钮 在 移动 网 页 中 的 表现 方法 。 
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1.6 ” 单 选 按钮 在 移动 Web 中 的 设计 应 该 便于 用 户 操作 


从 用 户 体验 角度 来 看 ,移动 Web 在 设计 上 要 同时 兼顾 较 小 的 屏幕 面积 和 较 大 的 屏幕 元 素 。 
由 于 移动 设备 屏幕 较 小 ， 所 以 移动 Web 中 的 文字 不 应 该 过 小 ， 而 且 要 为 用 户 输入 部 分 预 留 足 
够 的 空间 ， 以 便于 用 户 准确 点 击 。 


2. 用 户 使 用 习惯 
用 户 体 验 对 于 应 用 软件 用 户 界 面 设计 的 一 个 要 求 是 简化 使 用 过 程 的 复杂 度 , 即 在 理想 状态 
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下 ， 用 户 不 需要 阅读 使 用 说 明 ， 就 能 够 完成 一 些 基 本 操 
作 。 在 网 页 设计 上 ， 一 个 带 有 下 划 线 的 蓝 色 链接 既 可 以 。 [AR as yp 
实现 单纯 的 页 面 跳 转 的 功能 ， 也 可 以 实现 表单 数据 发 送 oy i061 Reeenp 
的 功能 。 可 是 ， 大 部 分 用 户 已 经 习惯 于 在 移动 应 用 程序 。 。 


中 通过 按钮 的 方式 实现 屏幕 切换 或 者 数据 发 送 ， 一 个 实 人 

现 跳 转 功能 的 常规 的 超级 链接 往往 被 按钮 代替 ， 图 1.7 

中 ， 箭 头 所 指 的 “上 一 题 ” 和 “下 一 题 ” 按 钮 ， 就 是 利 em 

用 按钮 来 实现 屏幕 切换 的 实例 。 在 这 个 实例 中 ， 仅 仅 通 = 

过 用 户 界面 的 实现 方式 ， 移 动 设备 用 户 一 般 不 会 轻易 觉 

察 网 页 和 移动 应 用 程序 在 用 户 界面 上 的 差别 。 图 1.7 移动 Web 的 用 户 界面 与 移动 
3. 浏览 器 的 兼容 性 应 用 程序 的 界面 没有 显著 差别 


大 多 数 Web 用 户 或 多 或 少 都 有 浏览 器 兼容 性 所 带 来 问题 的 经 验 。 同 一 个 网 页 在 不 同 的 浏 
览 器 中 表现 出 不 同 的 样式 ， 甚 至 在 某 一 些 浏览 器 中 无 法 正常 显示 。 浏 览 器 的 兼容 性 问题 由 很 多 
原因 构成 ， 比 如 浏览 器 采用 的 HIML、CSS， 以 及 JavaScript 版 本 的 差异 、 浏 览 器 开发 商 使 用 
自行 开发 的 技术 或 者 插件 ，XML 解析 器 的 差异 ， 图 像 处理 器 的 差异 等 。 

浏览 器 兼容 性 问题 同样 存在 于 移动 浏览 器 中 。 从 移动 浏览 器 的 发 展 历程 来 看 ， 一 部 分 移动 
浏览 器 还 需要 兼顾 早期 的 WAP 技术 ， 因 此 造成 网 页 解析 上 的 困难 。 采 用 HTML 5， 在 技术 上 
统一 了 桌面 和 移动 Web 的 开发 ， 移 动 网 页 可 以 在 移动 浏览 器 中 运行 ， 也 可 以 在 普通 的 桌面 浏 
览 器 中 运行 。 但是， 技术 上 的 统一 ， 并 不 意味 着 兼容 性 问题 的 彻底 解决 。 在 移动 网 页 的 设计 上 ， 
强求 某 种 表现 效果 ， 在 有 的 浏览 器 上 是 无 法 做 到 的 。 

即使 单纯 从 HTML 5 移动 网 页 的 角度 来 看 ， 由 于 不 同 的 浏览 器 采用 HIML 5 子 集 的 差别 ， 
许多 HTML 5 特性 并 不 能 在 所 有 的 移动 浏览 器 上 发 挥 。http://mobilehtml5.org 网 站 维护 了 一 系 
列 有 关 不 同 的 移动 浏览 器 对 HIML 5 特性 支持 的 数据 。 图 1.8 是 该 网 站 上 关于 最 新 数据 更 新 的 
截屏 。 
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图 1.8 mobilehtml5.org 网 站 有 关 HTML 5 在 移动 浏览 器 中 获得 支持 的 报告 
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1.2.3 兼容 性 与 Web 设 计策 略 


了 解 浏览 器 的 兼容 性 问题 将 十 分 有 助 于 提高 Web 设计 质量 。 尤 其 在 技术 标准 还 处 于 逐步 
完善 阶段 的 浏览 器 更 新 非常 频繁 的 移动 Web 领域 ， 理 解 Web 设计 的 基本 策略 是 十 分 必要 的 。 

下 面 将 简单 介绍 3 个 常见 的 Web 设计 策略 : 优雅 降级 、 自 适应 网 页 设计 ， 以 及 渐进 增强 。 
采用 不 同 的 Web 设计 策略 ， 反 映 出 设计 者 对 于 设计 理念 和 最 佳 方案 的 不 同 见解 。 

1. 优雅 降级 (Graceful Degradation) 


W3C Wiki 网 站 通过 一 个 经 典 实例 来 说 明 优雅 降级 在 Web 设 计 上 的 用 途 ”。 在 Intermet 和 图 形 
界面 浏览 器 发 展 的 初期 ， 不 是 所 有 的 Web 浏 览 器 都 支持 JavaScript。 后 来 ， 即 使 浏览 器 支持 
JavaScript， 用 户 仍然 能 够 因为 安全 原因 ， 关 闭 JavaScript 功 能 。 如 果 一 个 网 页 设计 有 网 页 打印 
功能 ， 即 含有 JavaScript 代 码 <a hre 人 “javascript:window.print0”>， 拥 有 JavaScript 功 能 的 浏览 器 
会 按照 正常 的 流程 执行 JavaScript 的 window.printO 功 能 ， 而 不 具备 JavaScript 功 能 的 浏览 器 则 无 
法 执行 该 语句 ， 但 用 户 可 能 在 按 下 打印 按钮 后 一 直 处 于 等 待 状态 。 为 了 防止 用 户 在 使 用 过 程 中 
的 困扰 ， 网 页 设计 时 ， 应 该 用 <noscript> 在 网 页 上 提示 用 户 该 网 页 无 法 直接 执行 打印 命令 ， 即 
通过 下 列 代码 显示 这 一 替代 方案 ， 而 具备 JavaScript 的 浏览 器 则 不 会 显示 该 信息 : 

<p id="printthis"> 

<a href="javascript:window.print () "> 打印 网 页 </a> 
</p> 

<noscript> 

<p class="scriptwarning"> 


请 通过 浏览 工具 栏 上 的 “打印 ”图 标 或 者 菜单 栏 中 的 “文件 ”|“ 打 印 ” 命 令 打 印 本 网 页 。 
</p> 

Ee 

在 上 面 的 实例 中 ， 网 页 首先 实现 了 网 页 所 需 的 功能 ， 然 后 它 为 功能 较 弱 的 浏览 器 提供 了 替 
代 方 案 。 这 个 实例 说 明了 以 下 几 点 : 四 网 页 设计 的 立足 点 是 尽 可 能 充分 发 挥 最 新 浏览 器 的 技术 
优势 ; @ 网 页 为 不 具备 最 新 功能 的 浏览 器 提供 备 选 方案 ; @ 备 选 方案 往往 是 由 最 具有 通用 性 的 
代码 编写 的 ， 以 保障 在 尽 可 能 多 的 浏览 器 中 顺利 运行 。 

优雅 降级 策略 在 Web 上 的 使 用 已 经 有 20 年 的 历史 ， 它 的 原始 思路 来 源 于 工程 领域 的 容错 
概念 。 优雅 降级 采用 的 是 优先 考虑 最 大 性 能 ， 并 预先 准备 备 选 方 案 的 一 种 策略 。 除 了 <noscript> 
以 外 , <img> 标 签 中 的 alt 属性 也 能 起 到 类 似 的 作用 。 当 浏览 器 无 法 加 载 或 显示 一 个 图 像 文件 时 ， 
alt 属性 中 的 文字 会 向 用 户 显示 出 来 ,优雅 降级 确保 了 网 页 不 会 由 于 技术 上 的 不 兼容 造成 显示 或 
网 页 功能 上 的 混乱 ， 并 向 用 户 提供 简明 扼要 的 信息 ， 以 避免 因为 误解 而 影响 正常 使 用 。 

作为 一 种 早期 的 Web 设计 策略 ， 优 雅 降级 在 Web 技术 早期 发 展 阶段 发 挥 了 相当 重要 的 作 
用 ， 但 是 它 离 真正 实现 其 最 初 的 设计 目标 还 是 有 一 定 距 离 的 。 

2. 自 适应 网 页 设计 (Responsive Web Design) 


自 适应 网 页 设计 ， 或 被 称 为 响应 式 网 页 设计 ， 经 常用 简称 RWD 表 示 ， 顾 名 思 义 ， 是 一 种 


@ 见 W3C Wiki 原文 : http://www.w3.org/wiki/Graceful_degredation versus_progressive_enhancement。 
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能 够 自动 匹配 显示 器 特性 的 网 页 设计 方法 。RWD 设 计 思 想 形 成 于 2011 年 ， 它 利用 了 当时 现 有 
的 Web 技 术 ， 包 括 HTML 5 和 CSS 3 中 新 的 页 面 布局 设计 方法 ， 比 如 流动 性 的 布局 技巧 、 使 用 
百分比 等 相对 值 来 代替 绝对 值 ， 引 进 媒 体 类 型 的 概念 等 。2012 年 正式 发 布 的 “媒体 查询 ”技术 
,扩充 了 CSS 3 对 不 同类 型 显示 设备 的 定制 支持 ， 增 加 了 主动 识别 显示 器 的 输出 宽度 和 输出 
高 度 、 显 示 器 的 宽度 /高 度 比率 、 色 彩 位 数 、 隔 行 / 逐 行 方式 、 分 辩 率 、 水 平 /垂直 显示 方向 等 。 

伴随 自 适 应 网 页 设计 的 出 现 , 新 技术 的 采用 上 和 网 页 设计 技巧 上 与 传统 的 网 页 设计 方法 有 
了 明显 的 区 别 。 严 格 规定 <table> 宽 度 的 设计 方法 已 经 不 再 使 用 。 图 形 等 显示 元 素 更 多 地 处 于 “ 浮 
动 ”状态 。 当 一 个 采用 自 适应 技术 的 网 页 在 浏览 器 中 显示 ， 并 从 打印 机 中 打印 同一 个 网 页 时 ， 
页 面 布局 可 能 会 有 所 不 同 ， 而 且 ， 当 改变 浏览 器 窗口 大 小 时 ， 网 页 布局 也 会 随 之 改变 。 另 外 ， 
采用 自 适应 技术 的 网 页 在 桌面 浏览 器 和 移动 设备 上 的 输出 也 会 随 显示 设备 的 不 同 而 自动 匹配 
相应 的 显示 方案 。 其 他 自 适应 网 页 设计 的 实例 还 包括 自动 改变 图 形 的 显示 大 小 、 自 动 匹配 移动 
设备 的 显示 方向 、 自 动 匹 配 分 辩 率 等 。 图 1.9 演示 了 图 1.6 中 的 网 页 在 Nexus 7 平板 电脑 中 的 
显示 效果 。 可 以 清楚 地 看 到 ， 由 于 屏幕 宽度 的 变化 ， 屏 幕 内 容 的 显示 位 置 发 生 了 相应 的 变化 。 


返回 主页 


No1. 新 中 国 第 一 个 体 
育 世界 冠军 是 ? 


1.9 网 页 在 宽屏 Nexus 7 中 的 显示 效果 能 够 自动 匹配 显示 屏 的 硬件 特性 


对 于 设备 类 型 ， 浏 览 器 与 显示 特性 的 识别 构成 了 自 适应 网 页 设计 的 基础 。 在 移动 Web 方 
面 ， 一 般 通 过 对 移动 设备 的 研判 、 对 浏览 器 user-agent 的 识别 ,来 实现 判断 浏览 器 对 于 Web 技 
术 支 持 程度 的 目的 。 

有 关 媒 体 类 型 在 网 页 设计 上 的 配置 和 使 用 ， 可 参考 本 书 的 第 3 章 。 

3. 渐进 增强 (Progressive Enhancement) 


渐进 增强 经 常用 简称 PE 来 表示 。 渐 进 增强 的 概念 最 早 见于 2003 年 ， 它 是 对 “优雅 降级 ” 


@ Media Query 技术 的 初步 设想 已 经 有 将 近 20 年 历史 了 ,但 是 该 技术 标准 的 第 一 个 版 本 直到 2012 年 6 月 才 正 
式 发 表 ， 见 http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/。 
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策略 的 一 次 重大 变革 。 优 雅 降级 策略 是 在 Web 设计 时 优先 考虑 最 新 的 浏览 器 特性 ， 与 此 相反 ， 
渐进 增强 首先 要 确保 一 个 网 页 的 内 容 能 够 被 恰当 地 呈现 出 来 。 

也 就 是 说 ， 在 网 页 设计 上 优先 使 用 被 大 多 数 浏览 器 采用 的 “通用 ”技术 ， 保 证 网 页 内 容 和 
网 页 上 的 基本 功能 在 所 有 的 浏览 器 上 正确 显示 和 和 运行。 在 此 基础 上 , 运用 与 RWD 类 似 的 技术 ， 
在 浏览 器 允许 的 情况 下 ， 优 化 网 页 的 显示 并 强化 网 页 的 功能 。 这 些 增强 的 功能 一 般 都 是 通过 链 
接 CSS 和 JavaScript 文件 等 方式 实现 的 。 

渐进 增强 与 其 他 Web 设计 策略 相 比 ， 在 某 些 方面 具有 明显 的 优势 。 首 先 ， 渐 进 增强 策略 
保证 了 网 页 内 容 的 完整 呈现 和 网 页 基本 功能 的 正确 运行 ， 网 页 的 适用 性 得 到 加 强 。 其 次 ， 使 用 
链接 外 部 文件 的 方式 引用 CSS 和 JavaScript， 能 够 充分 利用 浏览 器 的 内 部 缓存 ， 从 而 有 效 地 减 
少 页 面 加载 时 的 数据 流量 ， 优 化 网 站 的 性 能 。 

渐进 增强 与 自 适应 网 页 设计 在 采用 的 技术 手段 上 十 分 相近 。 当 采用 HIML 5 和 CSS 3 时 ， 
充分 发 挥 了 HTML 5 中 首创 的 语义 标记 (Semantic Markup) 的 作用 和 CSS 3 中 的 媒体 查询 技术 。 
语义 标记 使 HTML 网 页 文件 的 代码 更 能 代表 其 内 容 的 本 意 ， 而 传统 的 HTML 标记 则 只 注重 如 
何在 浏览 器 中 显示 网 页 ， 对 标记 中 的 实际 内 容 并 不 关心 。 

与 自 适应 网 页 的 设计 策略 相同 ，CSS 3 的 媒体 查询 技术 能 够 通过 渐进 增强 策略 判断 浏览 器 
的 特性 ， 并 在 此 基础 上 加 强 表现 特性 。 


1.3 jQuery Mobile 


jQuery 是 一 套 小 巧 、 使 用 简便 、 功 能 强大 、 对 各 种 浏览 器 有 很 好 支持 的 JavaScript 开源 程 
序 库 。 它 最 早 发 布 于 2006 年 ， 现 在 已 经 成 为 一 个 非常 流行 的 JavaScript 框架 。 正 如 jQuery 自 
己 所 称 ,jQuery 框架 改变 了 人 们 使 用 JavaScript 编写 代码 的 方式 。jQuery Mobile 是 jQuery 家 族 
的 重要 一 员 。 


1.3.1 jQuery 的 家 族 成 员 


jQuery 本身 是 自 成 一 体 的 一 套 JavaScript 程 序 库 ， 它 的 设计 受到 Dojo 和 YUICYahoo! User 
Interface) 等 其 他 JavaScript 框 架 的 影响 。jQuery 的 内 部 设计 在 很 大 程度 上 依赖 于 DOM。 通 过 
DOM, jQuery 能 够 定位 和 处 理 网 页 上 的 组 成 元 素 。jQuery API 还 具有 网 页 显示 效果 和 动画 效果 、 
Ajax 通信 、JSON 解 析 、CSS 样 式 操作 ， 以 及 侦 测 浏览 器 特性 等 功能 。jQuery 定 义 了 jQuery 选择 
器 的 用 法 、 事 件 处 理 等 语法 结构 。jQuery 程 序 库 是 jQuery 家 族 的 核心 。 

jQuery UI2 是 一 套 建立 在 jQuery 之 上 的 JavaScript 程 序 库 。 它 必须 与 jQuery 一 起 使 用 。jQuery 
UI 为 网 页 设计 者 预制 了 屏幕 组 件 ( 即 jQuery UI 中 的 Widgets)， 强 化 了 CSS 处 理 能 力 ， 提 高 了 网 站 
前 台 设计 和 交互 能 力 。jQuery UI 向 程序 员 提供 了 默认 的 下 载 方式 , 它 包 含 了 一 个 预先 定义 的 界 
面 风格 和 jQuery UI 的 所 有 功能 。 用户 也 可 以 根据 网 站 的 实际 需要 ,采用 定制 下 载 的 方式 。 在 定 
制 下 载 时 ， 用 户 可 以 只 选择 网 站 所 需要 的 功能 ， 并 选择 一 个 期 待 中 的 风格 。 


@ jQuery 网 站 : http://jquery.com。 
@ jQuery UI 网 站 : http://jqueryui.com。 
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jQuery UI 为 Web 设计 人 员 准 备 了 相当 多 的 预制 组 件 ， 如 按钮 、 对 话 框 、 日 历 、 菜 单 、 滑 
动 条 、 进 度 条 、 文 本 输入 提示 与 自动 完成 等 。 这 些 预制 的 组 件 简化 了 JavaScript 编程 ， 使 Web 
设计 人 员 能 够 把 精力 集中 到 业务 需求 的 实现 上 , 而 不 是 在 一 些 可 重复 利用 的 程序 上 过 度 地 消耗 
精力 。 图 1.10 演示 了 一 个 由 jQuery UI 实现 的 日 历 和 日 期 选择 组 件 。 


日 期 ， 
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图 1.10 通过 jQuery UI 中 的 Datepicker 组 件 实现 的 日 历 与 日 期 选择 

jQuery Mobile” 是 另 一 套 建立 在 jQuery 之 上 的 JavaScript 程 序 库 。 它 同样 必须 与 jQuery 一 起 使 
用 。jQuery Mobile 可 以 看 作 是 移动 版 的 jQuery UI，jQuery UI 面 向 桌面 浏览 器 ， 而 jQuery Mobile 
则 是 面向 智能 手机 和 平板 电脑 的 移动 浏览 器 。 与 jQuery UI 类 似 ，jQuery Mobile 也 提供 了 一 套 预 
制 的 屏幕 组 件 。 这 些 屏 幕 组 件 更 适合 于 拥有 触摸 屏 的 移动 设备 。jQuery Mobile 还 提供 了 许多 图 
标 ， 这 些 图 标 常 见于 其 他 移动 应 用 程序 中 。 使 用 系统 自 带 的 图 标 ， 将 有 利于 用 户 识别 图 标的 用 
途 ， 达 到 充分 利用 有 限 的 屏幕 大 小 、 简 化 用 户 操作 的 目的 。jQuery Mobile 中 同样 也 包含 有 事件 
处 理 等 API, 这 些 API 一 部 分 用 于 处 理 常见 的 网 页 加 载 等 系统 事件 , 另 一 部 分 用 于 处 理 手指 敲 击 
显示 屏 或 者 手指 在 显示 屏 上 划 过 等 与 移动 设备 密切 相关 的 外 部 事件 。 

jQuery、jQuery UI 和 jQuery Mobile 都 是 由 jQuery 团队 及 其 机 构 jQuery Foundation 开发 的 
开源 项 目 。jQuery 团队 另外 还 开发 了 QUnit 和 Sizzle 这 两 个 基于 JavaScript 的 开源 项 目 。 

QUnit 是 一 个 JavaScript 测试 框架 。 它 能 够 用 来 测试 jQuery、jQuery UI 和 jQuery Mobile 
项 目 ， 也 能 够 用 来 测试 普通 的 JavaScript 项 目 ， 甚 至 可 以 用 来 测试 QUint 自身 。Sizzle 是 一 个 
CSS 选择 器 引擎 。 

除了 jQuery 团队 开发 的 项 目 外 ，jQuery 还 通过 支持 第 三 方 插件 ， 来 引入 外 部 成 员 ， 这 些 
第 三 方 插件 往往 是 为 jQuery 或 者 jQuery Mobile 分 别 设计 的 。 


1.3.2 jQuery Mobile 简 介 


前 面 已 经 介绍 过 ，jQuery Mobile 是 一 套 基 于 JavaScript 的 用 户 界面 框架 。 它 需要 与 jQuery 
-起 使 用 。 它 不 是 jQuery 在 移动 平台 上 的 替代 方案 。jQuery Mobile 有 以 下 一 些 特 点 。 
1. 以 常用 Web 开 发 技术 为 背景 


jQuery Mobile 是 构造 在 JavaScript、HTML 5 和 CSS 3 等 技术 之 上 的 。 这 些 都 是 Web 开发 
的 常用 技术 ， 也 是 Web 开发 人 员 必 须 掌握 的 技术 。jQuery Mobile 需要 与 jQuery 一 起 使 用 ， 而 


@ jQuery Mobile 的 网 站 是 http://jquerymobile.com。 
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jQuery 也 非常 容易 学 习 和 使 用 ， 它 已 经 成 为 现在 流行 的 开发 框架 。 另 外 ， 由 于 jQuery Mobile 
与 jQuery 具有 同样 的 语法 结构 ， 所 以 jQuery 中 的 选择 器 、 方 法 等 都 可 以 在 jQuery Mobile 中 继 
续 使 用 。jQuery 和 jQuery Mobile 提供 了 大 量 的 网 页 常用 功能 、 系 统 事件 处 理 方法 和 屏幕 组 件 
等 , 使 网 页 开发 大 大 简化 。 从 以 上 诸多 方面 来 说 , 学 习 jQuery Mobile 的 技术 门槛 并 不 高 .jQuery 
Mobile 是 一 个 易学 易 用 的 JavaScript 框架 。 

HTML 5、CSS 3 和 jQuery 是 学 习 jQuery Mobile 的 前 提 条 件 。 本 书 的 第 2 章 、 第 3 章 和 第 
4 章 可 以 作为 以 上 技术 前 提 的 入 门 教程 。 


2. 统一 的 跨 平台 用 户 界面 


与 平常 的 HTML 网 页 一 样 ，jQuery Mobile 不 依赖 于 移动 平台 提供 的 API。jQuery Mobile 
网 页 可 以 在 不 同 的 操作 系统 的 不 同 的 浏览 器 中 运行 ， 包括 智能 手机 、 平 板 电 脑 或 者 电子 阅读 器 
上 的 移动 浏览 器 ,以 及 个 人 电脑 上 的 桌面 浏览 器 等 。 jQuery Mobile 网 页 的 运行 环境 并 不 局 限于 
移动 平台 。 

通过 移动 平台 提供 的 、 编 写 的 本 地 应 用 程序 ， 往 往 在 用 户 界 面 上 存在 着 一 些 差 异 。 例 如 表 
单 中 的 按钮 、 输 入 框 和 下 拉 列 表 等 ， 在 不 同 的 移动 平台 上 ， 可 能 有 不 同 的 外 观 。 而 通过 jQuery 
Mobile 开发 的 网 站 , 尽 可 能 做 到 了 在 不 同 的 移动 平台 上 外 观 的 一 致 性 。 虽然 受到 移动 设备 硬件 
和 浏览 器 版 本 的 制约 ， 用户 界 面 不 会 绝对 一 致 ， 但 是 ， 网 站 的 表现 风格 在 具有 相似 技术 背景 的 
移动 平台 上 ， 是 基本 一 致 的 。 这 种 跨 平台 的 用 户 界面 一 致 性 ， 为 构造 混合 型 的 移动 应 用 程序 提 
供 了 便利 ， 比 如 ，Worklight 和 Phonegap 等 跨 移 动 平台 的 开发 工具 ， 都 可 以 借助 jQuery Mobile 
来 开发 混合 型 的 移动 应 用 程序 。 


3. 综合 应 用 自 适应 设计 和 渐进 增强 策略 


jQuery Mobile 框架 在 系统 设计 上 同时 采用 了 自 适应 设计 和 渐进 增强 的 技巧 。 

jQuery Mobile 的 自 适应 设计 主要 采用 了 CSS 中 的 媒体 查询 技术 、 流 动 性 的 表单 和 布局 设 
计 ， 以 及 自动 调节 图 片 的 大 小 等 。 首 先 ， 通 过 CSS 的 媒体 类 型 和 媒体 查询 技巧 ， 为 当前 的 浏 
览 器 加 载 适当 的 CSS 样式 表 。 媒 体 类 型 技巧 ， 是 指 判断 当前 的 硬件 设备 ， 并 加 载 适 当 的 样式 
表 ; 通过 媒体 查询 技巧 ， 当 前 网 页 能 够 侦 测 到 所 处 的 浏览 器 的 分 辩 率 等 系统 参数 ， 这 样 ， 当 前 
网 页 就 可 以 根据 不 同 的 屏幕 分 辨 率 和 不 同 的 屏幕 大 小 ， 为 浏览 器 加 载 合适 的 样式 表 。 媒 体 类 型 
和 媒体 查询 技巧 在 平板 电脑 和 智能 手机 网 站 的 设计 上 非常 实用 。 流 动 性 的 表单 和 布局 设计 ， 可 
以 根据 当前 屏幕 的 宽度 ， 来 自动 调节 显示 方式 。 

jQuery Mobile 在 设计 上 使 用 了 HITML 5 的 语义 标签 , 网 页 的 内 容 可 以 在 大 部 分 浏览 器 中 正 
常 显示 。jQuery Mobile 还 使 用 了 _ HTML 5 的 扩充 属性 特性 ， 并 与 外 部 链接 的 CSS 样式 表 和 
JavaScript 程序 向 当前 网 页 提供 网 页 内 容 的 样式 设计 ， 并 在 支持 这 些 新 的 特性 的 浏览 器 中 提供 
增强 网 页 的 显示 和 网 页 功能 。 由 于 网 页 采用 了 渐进 增强 的 方式 ， 在 不 同 的 浏览 器 上 显示 会 有 差 
异 。 我 们 将 在 下 一 小 节 介 绍 浏览 器 的 分 级 和 兼容 性 问题 。 

4. 样式 主题 (Theme) 定 制 系统 


在 默认 情况 下 ,jQuery Mobile 为 用 户 提供 了 基本 的 样式 主题 配置 。 用 户 可 以 根据 需要 , 来 

定制 样式 主题 。 样 式 主题 是 一 套 定制 的 颜色 和 表现 细节 配置 表 。 样 式 主题 把 不 同 颜色 和 表现 细 

节 ( 字 体 、 阴 影 等 ) 应 用 到 屏幕 背景 和 不 同 的 屏幕 组 件 上 ， 形 成 网 站 的 统一 风格 。jQuery Mobile 
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向 用 户 提供 了 一 套 工具 ， 用 以 定制 样式 风格 。 
5. 网 页 结构 与 简介 的 处 理 方式 


大 部 分 Web 开发 人 员 已 经 习惯 了 一 个 网 页 文件 代表 一 个 屏幕 ， 或 者 把 多 个 网 页 文件 显示 
在 同一 个 屏幕 上 的 工作 方式 。jQuery Mobile 的 网 页 结构 特点 更 类 似 于 WAP 网 页 ， 一 个 网 页 文 
件 可 以 只 显示 在 一 个 屏幕 上 ， 也 可 能 代表 多 个 页 面 。 

jQuery Mobile 对 页 面 上 链接 的 处 理 也 稍 有 不 同 。 外 部 链接 可 能 通过 Ajax 实现 。 有 关 网 页 
结构 链接 的 处 理 方式 ， 我 们 将 在 相关 的 章节 中 详细 介绍 。 


1.3.3 ”再 谈 浏览 器 的 兼容 性 问题 


随 着 移动 硬件 设备 的 快速 发 展 , 以 及 移动 浏览 器 的 多 样 化 发 展 , 和 各 种 新 技术 标准 的 采用 ， 
浏览 器 的 兼容 性 问题 变 得 日 益 突出 。 网 站 设计 人 员 为 了 提升 用 户 体验 ， 需 要 为 移动 网 站 设计 出 
漂亮 的 用 户 界面 ,并 且 能 够 在 不 同 的 移动 设备 上 尽量 得 到 相似 的 效果 。jQuery Mobile 采用 的 渐 
进 增强 设计 策略 ， 在 很 大 程度 上 解决 了 浏览 器 的 兼容 性 问题 。 使 用 jQuery Mobile 开发 的 网 站 ， 
浏览 器 兼容 性 问题 可 以 通过 jQuery Mobile 框架 采用 的 自 适 应 技术 得 以 解决 。 

jQuery Mobile 框架 已 经 在 许多 主流 浏览 器 上 得 到 测试 ,这 些 浏览 器 的 运行 环境 包括 移动 设 
备 、 电 子 阅 读 器 和 主要 的 桌面 操作 系统 等 。jQuery Mobile 把 浏览 器 分 为 以 下 三 个 类 别 。 

@ A 级 浏览 器 : 完全 支持 jQuery Mobile 所 用 到 的 HTML 5 和 JavaScript 功能 。 

@ B 级 浏览 器 : 支持 除了 Ajax 以 外 的 所 有 其 他 A 级 浏览 器 所 具备 的 功能 。 

@ C 级 浏览 器 : 仅 支 持 基 本 的 HTML。 

表 1.1 列 出 了 jQuery Mobile 1.4 支持 的 浏览 器 以 及 测试 环境 。 

表 1.1 jQuery Mobile 1.4 支持 的 浏览 器 与 分 级 


浏览 器 (操作 系统 测试 设备 


A 级 浏览 器 
iPad(4.3/5.0/5.1/6.0/6.1)、iPad Mini(6.1)、iPad Retina(7.0)、 
Apple iOS 4.7.0 iPhone 3GS(4.3)、iPhone 4(4.3/5.1)、iPhone 4S(5.1/6.0)、 
iPhone 5(6.0)、iPhone SS(7.0 
4.4 Nexus 5 
4.1 ~4.3 Galaxy Nexus、Galaxy 7 
i 4.0 Galaxy Nexus 
这 Samsung Galaxy Tab 10.1、Motorola XOOM 
HIC Incredible(2.2)、Droid(2.2)、HTC Aria(2.1)、Google 
ee Nexus S(23 
HTC Surround(7.5), HTC Trophy(7.5)、 LG-E900(7.5)、 Nokia 
Windows Phone 7.5.8 800(7.8)、HTC Mazaa(7.8)、Nokia Lumia 520(8)、Nokia 
Lumia 920(8)、HTC 8x(8) 
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浏览 器 (操作 系统 ) 版 本 测试 设备 
BlackBerry Torch 9800(6)、BlackBerry Style 9670(6)、 
Blackberry hu BlackBerry Torch 9810(7)、BlackBerry Z10(10) 
PlayBook(1.0-2.0) PlayBook 
Palm WebOS 1.4~3.0 Palm Pixi(1.4)、Pre(1.4)、Pre 2(2.0)、HP TouchPad(3.0) 
i 移动 版 18 Android(2.3/4.1) 
桌面 版 10~18 OS X 10.7、Windows 7 
on Android 版 10 Android(4.0/4.1) 
桌面 版 16~24 OSX10.7、Windows7 
Skyfire 4.1 Android 2.3 
Opera 移动 版 11.5~12 Android 2.3 
Meego 12 Nokia 950/N9 
Tizen 预 发 行 版 
Samsung Bada 2.0 Samsung Wave 3、Dolphin 浏览 器 
UC Android 2.3 
Kindle 3/Fire/HD Kindle 内 置 的 WebKit 浏览 器 
Nook Color 1.4.1 非 平板 型 的 Nook Color 
Safari 桌面 版 5~6 OSX10.8 
Internet Explorer 8~10 Windows XP/Vista/7、Windows Surface RT 
Opera 桌面 版 10~12 OSX10.7、Windows 7 
B 级 浏览 器 
iOS 6.1、Android 4.1 
Nokia Symbian Nokia N8(Symbian^3)、C7(Symbian^3)、N97(Symbian^1) 
C 级 浏览 器 
Internet Explorer 7 与 更 早 的 版 本 Windows XP 
Apple iOS 3 与 更 早 的 版 本 iPhone(3.1)、iPhone 3(3.2) 
Bi Blackberry Curve 8330(4)、Blackberry Storm 2 9550(S)、 
Blackberry Bold 9770(5) 
Windows Mobile HIC Leo(WinMo 5.2) 
其 他 早期 智能 手机 任何 不 支持 媒体 查询 功能 的 设备 被 归 类 为 C 级 


有 关 最 新 版 本 的 jQuery Mobile 对 浏览 器 的 支持 ， 可 参考 jQuery Mobile 浏览 器 分 级 支持 网 


站 GBS(Graded Browser Support): http://jquerymobile.com/gbs/。 


jQuery Mobile 的 视觉 效果 ， 尤 其 是 在 网 页 切换 特效 方面 ， 依 赖 于 CSS 的 表现 能 力 。 即 使 
是 A 级 浏览 器 ， 尽 管 完 全 具备 jQuery Mobile 所 用 到 的 HTML 5 和 JavaScript 功能 ， 但 由 于 在 
CSS 方面 表现 能 力 的 不 同 ， 网 页 的 实际 视觉 效果 可 能 在 不 同 浏览 器 上 会 有 差异 ， 这 是 由 Web 


应 用 的 本 质 决 定 的 。 
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本 节 将 介绍 开发 和 测试 jQuery Mobile 网 站 需要 使 用 的 开发 环境 ， 包 括 编辑 器 、 服 务 器 、 


@ 为 了 支持 多 国语 言 文字 ， 本 书 中 所 有 的 实例 ,包括 附 带 光 盘 中 的 所 有 的 网 页 实例 ， 都 
采用 了 UTF-8 编码 。 

@ ”即使 是 运行 静态 网 页 ，jQuery Mobile 仍然 需要 使 用 一 个 Web(HTTP) 服 务 器 。 
本 书 所 涉及 的 Java、Eclipse， 以 及 Android 开发 工具 等 软件 ， 均 为 32 位 版 。 


1.4.1 jQuery Mobile 框 架 


1. 下 载 jQuery Mobile 


jQuery Mobile 可 以 通过 其 网 站 http://jquerymobile.com 下 载 。 从 图 1.11 中 , 我 们 可 以 看 到 ， 

在 jQuery Mobile 产品 主页 的 右 侧 ， 提 供给 用 户 两 种 不 同 的 下 载 方式 : 定制 下 载 和 最 新 版 本 的 
下 载 。 

EE EE 下 -lolal 


SRuoy Mool 节 本 i 
envymoble com C)- soseceseah PUM 


ROOST SAN DIEGOJA 


EEB 10 - 11,2014 


PRS 
1.11 jQuery Mobile 主 页 与 下 载 方式 

定制 下 载 ， 是 指 Web 开发 人 员 根 据 网 站 的 实际 需要 ， 有 选择 地 下 载 jQuery Mobile 中 部 分 
核心 功能 、 导 航 方式 、 页 面 切换 效果 、 表 单 处 理 方式 ， 以 及 系统 预先 定制 的 屏幕 组 件 等 。 由 于 
定制 下 载 还 处 于 实验 阶段 ， 暂 时 不 推荐 在 产品 环境 中 使 用 。jQuery Mobile 通过 最 新 版 本 的 下 载 
链接 ， 提 供 了 完整 的 产品 。 

解压 下 载 得 到 的 jQuery Mobile 最 新 版 本 , 能 够 得 到 图 1.12 中 的 文件 (此 处 为 jQuery Mobile 
1.4.0 下 载 包 ， 不 同 版 本 的 jQuery Mobile 在 解压 后 得 到 的 文件 可 能 略 有 差别 )。 熟 悉 jQuery 的 
读者 会 发 现 ，jQuery Mobile 与 jQuery 一 样 ， 在 系统 文件 中 ， 文 件 名 带 有 min 的 是 紧凑 版 本 ， 
空格 字符 已 经 被 删除 ， 文 件 比较 小 ， 有 利于 加 快 文件 加 载 ， 提 高 网 站 性 能 。 而 文件 名 中 不 带 有 
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min 的 未 压缩 版 本 ， 保 留 了 空格 等 格式 字符 ， 便 于 程序 调试 。 任 何 一 组 文件 都 能 满足 学 习 网 页 
编写 和 测试 的 目的 。 


车 jquery.mobile,external-png-1.4.0.css 
入 jquery.mobile.external-png-1.4.0,min.css 
jquery.mobile icons-1,4,0.css 
jquery.mobile icons-1,4.0,min.css 

建 jquery,mobile,inine-png-1.4.0.css 
jquery.mobie.inine-png-1.4.0.min.css 
jquery.mobile .nine-svg-1.4.0.css 
Djquery.mobile inine-svg-1.4.0.min.css 
jquery.mobile.structure-1.4.0,css 
jquery.mobile.structure-1.4.0.min.css 
jquery.mobile.theme-1.4.0.css 
jquery.mobile.theme-1.4.0.min.css 


1.12 jQuery Mobile 1.4.0 中 的 文件 
2. 下 载 jQuery 


在 图 1.11 的 右 侧 ，jQuery Mobile 下 载 链接 的 下 方 ，jQuery Mobile 提供 了 与 当前 jQuery 
Mobile 版 本 兼容 的 jQuery 版 本 。 比 如 ，jQuery Mobile 1.4.0 与 jQuery 1.8~1.10 或 者 jQuery 2.0 
兼容 ， 读 者 可 以 任 选 其 中 之 一 。jQuery 开发 团队 提醒 用 户 ，jQuery 2.x 与 jQuery 1.x 拥有 相同 
的 API， 但 是 jQuery 2.x 不 支持 耻 6/7/8， 而 IE 6/7/8 又 是 非常 通用 的 浏览 器 ， 因 此 jQuery 1.x 
仍然 是 被 推荐 使 用 的 版 本 。 读 者 可 以 从 jQuery 主页 jquery.com， 通 过 Download 链接 进入 下 载 
页 面 ， 并 找到 与 当前 jQuery Mobile 相 匹 配 的 版 本 ， 如 图 1.13 所 示 。jQuery 的 每 一 个 版 本 都 提 
供 了 紧凑 版 和 未 压缩 版 供用 户 选择 。 


Dow iQuer on 
Ele Edt Vew Hetory Bookmaks Tpok Help 
心 bownbadjRuery | jouery 国 


(©® jquerycom/cowrioad c|- vcs:en Plynee 


Past Releases 


Al past releases can be fcund on the Quan CDN. Here are some commonly used racent versions; 


Version Docs Downloads 


202 ReleaseNotes Minifed Uncompressec 


110.1 ReleaseNotes Minified Uncompressec 
民 


和 
191 ReeaseNotes MinifiedUncompressed 


183 ReleaseNotes Miniied Uncompressec 


172 ReleaseNates Minified Jncompressed 


164 RaeaseNotes MinifiedUncompressed 


1.13 ”找到 与 当前 jQuery Mobile 相 匹配 的 jQuery 版 本 
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1.4.2 ”开发 工具 、 测 试 环境 与 模拟 器 


1. 安装 编辑 器 

本 书 中 所 涉及 的 网 页 ， 是 指 由 HIML、 
JavaScript 和 CSS 等 文本 文件 组 成 的 网 页 .原则 上 ， 
et Mobile 网 

。 为 了 规范 文件 编码 ， 支 持 多 国文 字 ， 本 书 推 
交合 用 Notepad++。Notepad++ 可 以 通过 其 主页 


http://notepad-plus-plus.org 下 载 。 
在 编辑 源 文件 的 时 候 ， 应 该 从 Notepad++ 的 


EE 


apache \jqueryMobile\jqm02\checkbox\test03_m.htm 


<html> 


3 
4 

5 日 <head> 

6 <cicll 
8 


<mera ConverttoUCS-2BgEndan 


Encoding 菜单 中 选择 Encode in UTF-8 without <sery a 
BOM， 如 图 1.14 所 示 。 使 用 UTF-8， 可 以 方便 地 19 i 
2 <meta name="¥yieypoxrt" content="widt 


123 |</head> 


实现 国际 化 18n) 和 本 地 化 (L10n)。BOM 是 Byte 
Order Mark, 是 附加 在 文本 文件 的 开始 位 置 的 几 个 1.14 ”选用 UTF-8 编码 

字 节 ， 用 于 指明 16 位 或 32 位 Unicode 文本 文件 

在 内 存 中 的 字 节 顺序 。BOM 不 是 必需 的 ， 它 对 于 UTF-8 编码 的 文件 没有 实际 意义 ， 所 以 一 般 
建议 对 于 UTF-8 编码 的 文件 不 使 用 BOM。 


2. 安装 Opera 移 动 浏览 器 模拟 器 


jQuery Mobile 是 建立 在 JavaScript 和 CSS 上 的 框架 ， 它 运行 在 HTML 网 页 中 ， 因 此 ， 目 
前 主流 浏览 器 都 可 以 运行 jQuery Mobile 网 页 ， 而 不 是 必需 使 用 专门 的 移动 浏览 器 。 例 如 ， 本 
书 中 ， 从 第 5 章 起 的 许多 移动 网 页 实例 可 以 在 Chrome 桌面 浏览 器 中 演示 。 但 是 ， 由 于 移动 设 
备 的 多 样 化 ， 开 发 和 测试 人 员 应 该 使 用 特定 的 移动 浏览 器 ， 以 模拟 真实 的 用 户 体验 。 使 用 实际 
的 移动 设备 是 其 中 一 个 选项 ， 这 样 ， 开 发 人 员 可 以 最 直接 地 感受 到 网 站 的 实际 使 用 效果 。 可 是 
同时 拥有 多 种 移动 设备 的 成 本 相当 高 , 而且 学 习 使 用 每 一 种 设备 会 使 得 测试 人 员 不 能 把 注意 力 
集中 到 浏览 器 中 ， 降 低 了 开发 和 测试 的 效率 。 因 此 ， 使 用 移动 浏览 器 模拟 器 ， 就 成 为 一 个 非常 
有 效 的 选择 。 

Opera 移动 模拟 器 (http://www.opera.com/developer/mobile-emulator) 能 够 运行 在 多 种 智能 手 
机 和 平板 电脑 中 。Opera 移动 模拟 器 可 以 模拟 Amazon Kindle、Asus、HTC、Motorola、Toshiba、 
LG、Samsung 和 Sony 等 移动 设备 ， 如 图 1.15 所 示 。 

使 用 移动 模拟 器 ， 能 够 很 方便 地 在 PC 机 上 完成 类 似 真实 环境 的 测试 ， 包 括 模拟 同一 个 网 
页 在 不 同 品牌 、 不 同 屏幕 分 辩 率 的 设备 上 的 运行 效果 等 。 

3. 安装 和 使 用 Android 模 拟 器 


Opera 移动 模拟 器 能 够 模拟 Opera 移动 浏览 器 在 不 同 硬件 平台 上 的 工作 情况 。 这 种 模拟 仅 
限于 浏览 器 本 身 ， 它 不 能 模拟 浏览 器 的 硬件 特点 ， 比 如 说 移动 设备 的 硬件 按钮 等 。 使 用 与 操作 
系统 相关 的 模拟 器 , 能 够 更 加 逼真 地 同时 表现 浏览 器 模拟 器 的 工作 情况 , 以 及 设备 的 硬件 特色 。 
Android 模拟 器 就 是 其 中 一 种 与 硬件 设备 密切 相关 的 工具 , 它 是 Android 开发 套件 中 的 一 部 分 。 
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Android 开发 套件 是 用 于 开发 基于 Java 的 移动 应 用 程序 。 它 的 模拟 器 界面 十 分 接近 真实 的 硬件 
设备 ， 包 括 硬件 按钮 和 系统 预 装 的 应 用 程序 等 。 我 们 将 使 用 Android 模拟 器 中 默认 的 浏览 器 来 
测试 我 们 编写 的 代码 。 


G Opera Mobile Emulator 


[wxea Landscape (1260xa00) 本 


Galaxy Note 
ne eS 容 口 比例 50% 习 
Samsung Galaxy 5 III i = 
S555 | WW | an 二 人 天 三 


We wm | 


图 1.15 ”Opera 移 动 模拟 器 中 可 供 模拟 的 设备 


3 注意 :， 以 下 安装 过 程 仅 限于 希望 模拟 真实 Android 运行 环境 的 读者 ，Google Chrome、 
FireFox 桌面 浏览 器 和 Opera 模拟 器 已 经 能 够 满足 学 习 和 测试 jQuery Mobile 网 页 
的 目的 。 


安装 Android 模拟 器 包括 以 下 几 个 步骤 。 

(1) 下 载 和 安装 JDK 

建立 在 Eclipse 基础 之 上 的 Android 开发 套件 需要 运行 在 Java 虚拟 机 上 ， 因 此 必须 先 安装 
Java 运行 环境 JRE 或 者 Java 开发 套件 JDK。 这 里 以 下 载 和 安装 JDK 为 例 。JDK 可 以 从 Oracle 
的 Java SE 的 主页 http://www.oracle.com/technetwork/java/index.html 中 找到 下 载 链接 。 下 载 的 
JDK 是 一 个 可 执行 文件 ， 双 击 即 可 按照 默认 方式 安装 。 安 装 JDK 后 ， 还 需要 按照 下 面 的 方法 
设置 操作 系统 的 环境 变量 ， 把 JDK 安装 路 径 赋予 环境 变量 JAVA_HOME。 

在 Windows XP 中 ， 右 击 “ 我 的 电脑 ”， 从 弹出 快捷 菜单 中 选择 “属性 ”命令 ， 再 从 弹出 
的 对 话 框 中 选择 “高 级 ”选项 卡 ， 最 后 在 “高 级 ”选项 卡 中 单 击 “ 环 境 变 量 ” 按 钮 。 这 样 就 可 
以 在 操作 系统 的 “环境 变量 ”对 话 框 中 新 建 一 个 环境 变量 JAVA_HOME, 或 者 修改 当前 已 有 的 
JAVA_HOME 值 。 

在 Windows 7 中 ， 先 在 开始 菜单 上 右 击 “属性 ”， 然 后 在 弹出 窗口 的 左边 一 栏 上 选择 “高 
级 系统 设置 ”， 这 时 候 会 出 现 “系统 属性 ”窗口 ， 我 们 可 以 通过 “系统 属性 ”窗口 下 方 的 “ 环 
境 变量 ”按钮 新 建 一 个 环境 变量 JAVA_HOME， 或 者 修改 当前 已 有 的 JAVA_HOME 值 。 

在 Windows 8.1 上 ， 我 们 需要 先 右 击 “ 开 始 ” 按 钮 ， 然 后 ， 在 弹出 菜单 上 选择 System 选 
项 ， 如 图 1.16 所 示 ， 在 弹出 的 System 窗口 的 左边 一 栏 上 选择 高 级 系统 设置 ， 如 图 1.17 所 示 ， 
屏幕 这 时 弹出 系统 属性 窗口 ， 我 们 可 以 通过 系统 属性 窗口 下 方 的 “环境 变量 ”按钮 新 建 一 个 环 
境 变量 JAVA_HOME， 或 者 修改 当前 已 有 的 JAVA_HOME 值 ， 如 图 1.18 所 示 。 
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1.16 右 击 Windows 8.1 的 “开始 ” 
按钮 出 现 的 弹出 菜单 


«) (3 相同 ，Control Panel » AllControlPanelltems » System v6 Search Control Panel 万 
re View basicinformation about your computer 
嘱 Device Manager Windows edition 


"3 newt opoaion Mim 踢 Windows8 


(Get more features with a new edition of 


Windows 
System 
processor Iintel(R) Core(TM) 5-3210M CPU @ 2.50GHz 2.50 GHz 
Installed memory (RAM): «8.00 GB (7.82 GB usable) 
System type 64-bit Operating System, x64-based processor CE 
Pen and Touch No Pen or Touch Input is available for this Display 


1.17 Windows 8.1 上 的 System 窗口 


System Properties 


Computer Name | Hardware | Advanced | Sytem Protection | Remale 
You must be logged on as an Administrator to make most of these changes. 


Peromance 
Vieual effects. processor scheduing. memory usage. and vitual memory 


JAVA_HORE Cibavaydk16.017 


1.18 Windows 8.1 上 的 系统 属性 窗口 和 环境 变量 窗口 
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(2) 下 载 和 安装 Android 开发 套件 

Android 开发 工具 本 身 是 一 个 Eclipse 的 插件 ， 因 此 ， 我 们 可 以 单独 下 载 插件 ， 并 安装 到 一 
个 已 经 安装 的 Eclipse 上 ， 或 者 直接 下 载 包含 Eclipse 和 Android 开发 工具 的 一 个 完整 套件 。 由 
于 每 个 版 本 的 Android 开发 工具 对 于 Eclipse 的 版 本 各 有 要 求 ， 下 载 完整 的 套件 比较 方便 。 

Android 开发 套件 (简称 为 ADT) 可 以 在 Android 开发 者 网 站 http://developer.android.com 下 
载 。 它 是 一 个 ZIP 压缩 文件 ， 下 载 以 后 ， 只 需要 解压 到 一 个 指定 的 目录 即 可 。 启 动 Android 开 
发 套件 的 方法 与 启动 Eclipse 的 方法 相同 ， 可 以 直接 双击 Eclipse 安装 目录 下 的 Eclipse 文件 ， 
或 者 通过 Eclipse 的 -data 启动 参数 使 用 预先 准备 好 的 工作 空间 等 。 有 关 各 种 启动 Eclipse 的 方法 ， 
可 参照 Eclipse 帮助 文档 ， 这 里 不 做 详细 介绍 。 

(3) 配置 Android 虚拟 设备 

Android 系统 默认 的 浏览 器 预 装 在 Android 设备 上 .我 们 需要 先 创建 一 个 Android 设备 模拟 
器 (Android 虚拟 设备 ， 简 称 为 AVD)， 才 能 使 用 AVD 上 的 默认 浏览 器 。 创 建 和 配置 AVD 可 以 
通过 下 列 步 骤 来 完成 。 

首先 启动 ADT， 并 在 ADT 的 Window 菜单 中 选择 Android Virtual Device Manager。 在 初 
次 安装 的 ADT 中 ， 弹 出 的 是 一 个 空 的 Android Virtual Device Manager 窗口 ， 其 中 没有 任何 虚 
拟 设备 。 单 击 窗口 上 的 New 按钮 , 屏幕 出 现 如 图 1.19 所 示 的 Create New Android Virtual Device 
(AVD) 对 话 框 。 


Create new Android Yirtual Device (AYD) 


AVD Name; exws7_1 
Device: Nexus 7 (7.27", 800 x 1280: tvdpi) Es 


Target: [androd4.4-apilevelio 司 
CPUABT Fnmen 了 
Keyboard: [THardware keyboard present 

sn (TDisplay a skin wth hardware controk 
Fokcamers In 可 
Bakcmrat [We RN 刁 


Memory Options 5 


Gs eq 
Che 


Emulation Options: 厂 Snapshot 。 厂 UseHos GPU 


Oyerrde the exlsting PYD with the same name 


Coe] ee | 


图 1.19 新 建 一 个 虚拟 Android 设 备 
我 们 可 以 根据 自己 的 需要 ， 选 择 虚拟 设备 的 屏幕 大 小 和 屏幕 分 辨 率 ， 也 可 以 选择 一 个 已 知 
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型 号 的 设备 ， 比 如 Google Nexus 7。 对 于 测试 jQuery Mobile 网 页 ， 设备 的 内 存 大 小 、 存 储 卡 的 
容量 、 照 相机 等 选项 并 不 重要 。 输 入 完 所 有 的 选项 后 ， 单 击 OK 按钮 保存 新 建 的 虚拟 设备 。 
(4) 启动 Android 虚拟 设备 
如 果 我 们 配置 了 多 个 虚拟 设备 ， 可 以 选择 启动 其 中 任何 一 个 。 启 动 Android 虚拟 设备 ， 
须 选中 需要 启动 的 设备 ， 然 后 单 击 Start 按钮 即 可 ， 如 图 1.20 所 示 。 tpi 
慢 ， 一 般 需要 几 分 钟 时 间 。 


Android Virtual Devices |Device Defintions | 


List of existing Android Yrtual Devices located at C:\Documents and Settings\inyil.android\avd 


WA vald Android Witual Device, — A repairable Android Witual Device. 
HK An Android Virtual Device that Failed to load, Click ‘Details' to see the error, 


图 1.20 选择 并 启动 Android 虚 拟 设备 
(5) 测试 
使 用 虚拟 设备 中 的 浏览 器 测试 网 页 ， 需 要 通过 Intemet 上 的 Web 服务 器 才能 实现 。 关 于 怎 
样 在 Internet 上 设置 自己 的 Web 服务 器 ， 读 者 可 参阅 附录 中 的 介绍 。 


1.4.3 Web 服务 器 


测试 HTML 5 的 离线 功能 和 测试 jQuery Mobile 网 站 都 需要 Web 服务 器 的 支持 。 这 里 ， 我 
们 介绍 常用 的 Apache httpd。 在 过 去 的 十 几 年 里 ，Apache httpd 是 一 个 最 流行 的 Web 服务 器 。 
它 能 够 服务 于 静态 网 站 ， 也 能 当 作 代理 服务 器 使 用 。 

Apache httpd 是 Apache 的 一 个 开源 项 目 , 它 可 以 从 http://httpd.apache.org/ 下 载 到 。Windows 
版 的 Apache httpd 以 可 执行 文件 的 方式 提供 。 它 的 安装 过 程 非常 简单 ， 只 需 双 击 可 执行 文件 ， 
并 按照 默认 方式 安装 即 可 ，Apache httpd 会 被 自动 安装 成 Windows 的 服务 ， 并 且 能 够 在 开机 时 
自动 运行 。 安 装 后 ，Windows 的 任务 栏 上 被 添加 了 一 个 监控 程序 图 标 。 双 击 该 图 标 ， 我 们 就 能 
看 到 Apache httpd 服务 器 当前 的 运行 状态 。 如 图 1.21 所 示 ， 通 过 Apache httpd 服务 器 的 监控 程 
序 窗口 ， 可 以 启动 、 停 止 和 重启 动 Web 服务 器 。 

Apache httpd 服务 器 的 默认 文档 路 径 是 服务 器 安装 路 径 下 的 htdocs 目录 ， 比 如 C:\Program 
Files\Apache Software Foundation\Apache2.2\htdocs。 如 果 我 们 需要 改变 服务 器 的 默认 的 文档 路 
径 ， 就 需要 修改 服务 器 的 配置 文件 httpd.conf， 它 位 于 服务 器 安装 路 径 下 的 conf 子 目录 中 。 

下 面 通过 简单 的 3 步 操作 ， 就 能 完成 文档 根 目 录 的 修改 。 

(1) 创建 一 个 新 的 文档 路 径 ， 例 如 ci\www。 
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Apache Service Monitor 


Service Status: 
5 


|Apache/2,2,14 (Win32) 
图 1.21 Apache httpd 服 务 器 的 监控 程序 窗口 


(2) 修改 httpd.conf 文件 。 找 到 配置 文件 中 的 配置 属性 DocumentRoot 和 Directory， 并 把 
服务 器 默认 的 路 径 改 为 在 上 一 步 中 创建 的 新 目录 名 。 
(3) 通过 Apache httpd 服务 器 的 监控 程序 窗口 重新 启动 服务 器 。 


站 注意 : 有 关 Apache httpd 服务 器 离线 访问 的 配置 问题 ， 将 在 第 2 章 中 进行 介绍 。 


1.5 本 章 习 题 


选择 题 (多 选 ) 
(1) 与 优雅 降级 策略 相对 的 Web 设计 策略 是 ( ”)。 
A.， 自 适用 策略 B. 渐进 增强 策略 C.， 响应 式 设计 策略 


(2) 以 下 哪些 场合 需要 用 到 Web 服务 器 ? ( ) 
A. 测试 jQuery 程序 
B. 在 客户 端 自动 更 新 离线 HIML 5 网 页 
C. 测试 jQuery Mobile 网 站 
(3) 使 用 Opera 移动 浏览 器 模拟 器 无 法 测试 哪些 功能 ? ( 。 ) 
A. 网 页 用 户 界面 B. 服务 器 交互 与 服务 调用 
C. 设备 硬件 按钮 所 触发 的 事件 D. 模拟 设备 上 的 默认 浏览 器 
(4) 由 于 苹果 公司 的 iPhone 使 用 了 高 分 辨 率 显示 屏 和 极 高 的 像素 密度 ， 所 以 在 设计 移动 
网 站 时 ， 应 该 在 文字 和 按钮 等 方面 充分 发 挥 硬件 的 优势 ， 使 屏幕 容纳 更 多 的 内 容 。( )》 
A. 对 。 这 样 设计 的 网 页 内 容 会 更 加 丰富 
B. 对 。 硬 件 优势 应 该 总 是 放 在 第 一 位 
C. 错 。iPhone 屏幕 较 小 ， 这 样 的 设计 会 造成 部 分 大 屏幕 智能 手机 兼容 性 问题 
D. 错 。 过 份 强调 硬件 优势 会 造成 网 页 显示 时 字体 太 小 ， 无 法 辨认 
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(5) jQuery Mobile 需要 下 载 哪些 软件 并 且 一 起 使 用 ? ( ) 
A. jQuery B. jQuery UI 
C. QUint D. jQuery Mobile Theme Roller 
(6) 利用 jQuery Mobile 开发 的 网 站 ， 能 够 使 网 页 用 户 界面 在 不 同 的 硬件 平台 上 保持 完全 
a 


A. 是 B. 否 
(7) 在 jQuery Mobile 对 浏览 器 的 分 级 中 ，B 级 浏览 器 不 具备 A 级 浏览 器 的 哪些 功能 ? 
人 

AiGSS3 B. CSS 媒体 类 型 支持 

C. Ajax D. XHTML-MP 支持 
(8) jQuery Mobile 采用 了 哪些 Web 设计 策略 ? ( 。 ) 

A. 优雅 降级 

B. 自 适 应 设计 

C.， 渐进 增强 
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HTML 5 开发 基础 


本 章 导读 : 


HTML 是 网 站 开发 人 员 的 必 备 技术 。 作 为 学 习 jQuery Mobile 的 预备 知识 ， 本 
章 从 新 手 入 门 的 角度 ， 简 要 地 介绍 HTML 的 语法 特点 和 基本 用 法 ， 并 把 重点 放 在 
HIML 5 新 增 的 功能 上 。 在 本 章 中 介绍 的 一 部 分 新 增 功能 ， 将 有 助 于 理解 jQuery 
Mobile 框架 本 身 的 设计 原理 ， 同 时 也 有 助 于 理解 CSS 3 与 HTML 5 协同 工作 的 原 
理 。 通过 本 章 的 学 习 , 读者 将 会 对 HTML 5 网 页 开发 的 特点 有 一 定 的 了 解 。 已 经 熟 
悉 HTML 5 网 页 设计 的 读者 ， 可 以 快速 浏览 本 章 。 如 果 读 者 希望 更 详细 地 了 解 
HIML 5， 可 阅读 这 方面 的 专著 。 

本 章 在 术语 的 使 用 上 ，HTML 是 泛 指 HTML 的 不 同 版 本 ， 包 括 传统 的 HTML 
和 正在 开发 中 的 HIML 5; 术语 HIML 5 和 XHTML 均 特 指 特定 版 本 的 语法 规则 ， 
其 中 ，XHTML 强调 一 个 文档 必须 遵守 XML 格式 良好 (Well-formed) 的 语法 规则 。 

另外 ， 刀 果 读 者 使 用 移动 设备 测试 本 章 中 的 网 页 实例 ,， 可 能 会 得 到 与 桌面 浏览 
器 不 同 的 效果 。 读 者 可 以 暂时 忽略 这 些 差异 ,我 们 将 从 第 5 章 起 ， 着 重 介绍 移动 网 
站 的 设计 和 界面 特点 。 
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2.1 HTML 5 的 语法 结构 


相信 HTML 对 于 大 多 数 读者 来 说 应 该 已 经 不 是 什么 陌生 的 新 技术 了 。 但 我 们 仍 将 在 这 一 
节 中 简要 介绍 HTML 网 页 设计 的 基本 方法 和 技巧 ， 并 在 此 过 程 中 逐步 介绍 HTML 5 与 过 去 传 
统 HTML 在 语法 结构 和 设计 思想 上 的 不 同 、 HTML 5 的 优点 和 特点 , 以 及 HTML 5 对 桌面 Web 
和 移动 Web 在 设计 理念 上 带 来 的 变化 。 

在 第 1 章 中 , 我 们 介绍 了 HTML 5 在 逐步 标准 化 的 过 程 中 , WHAT 工作 组 , 以 及 经 由 W3C 
参与 组 建 的 HTML 工作 组 起 到 了 关键 的 作用 。 但 是 , WHAT 工作 组 与 W3C 在 设计 理念 和 技术 
标准 化 方面 的 看 法 有 很 多 不 同 ， 从 2011 年 起 ，HTML 5 技术 标准 逐渐 出 现 了 一 些 分 支 。 其 中 
最 主要 的 表现 是 W3C 和 WHAT 工作 组 分 别 发 布 了 HIML 5 技术 标准 的 草稿 。W3C 发 布 的 草 
稿 以 WHAT 工作 组 的 最 新 更 新 为 前 提 ， 并 补充 了 一 部 分 W3C 认为 必须 马上 标准 化 的 内 容 。 而 
WHAT 工作 组 坚信 HTML 5 技术 的 发 展 是 一 个 漫长 的 渐进 过 程 ， 他 们 更 愿意 维护 一 个 逐渐 发 
展 的 版 本 ， 而 不 是 一 个 可 以 马上 实现 标准 化 的 版 本 。 分 歧 使 我 们 可 以 同时 看 到 两 个 非常 类 似 、 
但 在 某 些 技术 细节 上 存在 着 一 些 显著 差异 的 HTML 5 技术 规范 草稿 。 

HTML 5 的 设计 与 一 些 正在 使 用 的 其 他 技术 标准 在 个 别 内 容 上 有 冲突 。 细 心 的 读者 在 阅读 
技术 规范 草稿 原文 的 时 候 ， 可 能 会 注意 到 这 些 差别 。 本 书 将 介绍 已 经 被 广 为 接 受 的 HIML 5 语 
法 ， 对 于 HTML 5 在 技术 理论 的 层面 上 不 做 探讨 。 


2.1.1 HTML 5 网 页 的 基本 结构 


HTML 网 页 从 源 代码 上 看 ， 是 由 一 组 标签 经 过 一 定 的 嵌 套 规则 而 组 成 的 树 状 结构 代码 。 
HTML 的 标签 嵌 套 不 需要 像 XML 那样 严格 ， 也 就 是 说 ， 有 一 些 HTML 元 素 并 不 要 求 必 须 使 用 
结束 标签 。 在 HIML 5 中 ， 某 些 元 素 的 结束 标签 在 特定 情况 下 是 可 有 可 无 的 。 有 关 这 些 元 素 标 
签 的 特殊 语法 规则 ， 我 们 将 在 本 章 的 2.2.7 小 节 中 介绍 。 

HTML 5 的 语法 与 传统 的 HTML 相似 ， 同 时 带 有 XHTML 的 特征 。 作 为 一 种 标记 语言 ， 
HTML 5 保留 了 语法 简洁 的 特点 ， 同 时 ， 稍 微 严格 的 语法 规则 使 HTML 5 更 容易 以 DOM 方式 
处 理 。 代 码 2.1 展示 了 一 个 含有 基本 组 成 部 分 的 HTML 5 网 页 样本 。 


代码 2.1 一 个 含有 最 基本 结构 的 HTML 5 样本 文件 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>A web page</title> 
</head> 
<body> 
<p> 
你 好 ，HTML51 
</p> 
</body> 
</html> 
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代码 2.1 与 平常 所 见 的 HTML 文档 (比如 HIML 4.0 格式 的 网 页 文档 ) 非 常 相似 。 它 含有 
HTML 文 档 的 最 外 层 的 <html> 标 签 。<html> 标 签 是 HTML 网 页 文档 的 根 元 素 ， 网 页 开发 人 员 可 
以 在 根 元 素 中 添加 lang 属 性 ， 用 于 说 明 当前 网 页 所 用 的 语言 ， 比 如 <html lang=“fr”> 表 示 当 前 网 
页 中 的 内 容 使 用 法 语 。lang 属 性 值 为 由 两 个 字母 组 成 的 国际 标准 语言 代码 了。 添加 了 语言 描述 
的 网 页 更 易于 在 线 翻 译 工具 准确 地 识别 和 翻译 。 表 2.1 列举 了 常用 的 语言 代码 。 


表 2.1 常用 的 ISO 639-1 语言 代码 


语 言 标准 代码 

阿拉 伯 语 ar 

中 文 zh 

简体 中 文 zh-Hans 
繁体 中 文 zh-Hant 
英语 en 

法 语 全 

德语 de 

日 语 a 

韩语 ko 

俄语 m 
西班牙 语 es 


<html> 标 签 的 内 容 含 有 由 <head> 和 <body> 分 别 标记 的 两 部 分 。<html> 标 签 及 其 <head> 和 
<body> 两 大 组 成 部 分 组 成 了 HIML 文档 的 基本 结构 。 网 页 的 <head> 部 分 的 作用 在 于 说 明 网 页 
的 标题 、 标 题 图 标 、 附 加 的 脚本 语言 程序 、 网 页 样式 ， 以 及 有 关 网 页 其 他 属性 的 描述 等 。 这 部 
分 内 容 除了 网 页 的 标题 和 图 标 以 外 ， 还 有 其 他 内 容 ， 能 够 影响 到 网 页 的 显示 方式 ， 例 如 附加 的 
样式 定义 ;另外 还 有 一 些 能 够 影响 到 网 页 的 动作 行为 ， 例 如 网 页 自动 跳 转 等 ， 但 本 身 并 不 直接 
显示 在 网 页 上 。 网 页 的 <body> 部 分 包含 了 网 页 在 浏览 器 中 显示 的 全 部 内 容 , 这 也 是 本 章 将 要 着 
重 介 绍 的 部 分 。 

很 多 开发 人 员 在 网 站 的 开发 过 程 中 已 经 通过 DOCTYPE 使 用 了 文档 类 型 声明 , 尤其 是 CSS 
的 某 些 功能 ， 比 如 z-index， 要 求 网 页 必须 含有 文档 类 型 声明 ,才能 够 在 正 浏览 器 中 正确 显示 。 
DOCTYPE 声明 没有 结束 标签 ， 它 必须 出 现在 网 页 文档 的 第 一 行 ， 即 在 <html> 标 签 之 前 ， 用 于 
向 浏览 器 声明 当前 网 页 文档 所 采用 的 HTML 的 语法 版 本 。DOCTYPE 声明 源 自 于 XML 中 引用 
DTD 验证 文档 有 效 性 的 方法 。 

在 过 去 的 HTML 版 本 中 ， 我 们 能 够 看 到 下 面 一 些 文档 类 型 声明 : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.0org/TR/html4/strict.dtd"> 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.o0rg/TR/html4/1loo0se.dtd"> 


@ 有 关 国 际 标准 语言 代码 ， 可 参考 由 国际 标准 组 织 制定 的 ISO-639-1 标准 。 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtm11/V/DTD/Vxhtml1-strict.adtd"> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www-w3.-org/TR/xhtml11/DTD/xhtml11.-dtd"> 

在 HTML 5 中 ，DOCTYPE 声明 不 再 引用 DTD， 只 需要 简单 的 <IDOCTYPE html> 即 可 。 
但 是 在 HTML 5 网 页 中 ，DOCTYPE 声明 不 能 省 略 ， 否 则 浏览 嚣 不 会 使 用 HTML 5 的 语法 ,而 
是 会 自动 启用 早期 版 本 的 HTML 语法 处 理 程序 来 解析 当前 的 HIML 5 网 页 。 

HTML 是 大 小 写 无 关 的 标记 语言 。 包括 DOCTYPE 声明 在 内 , 浏览 器 不 会 区 分 DOCTYPE 
或 者 doctype、<HTML> 或 者 <html>。 在 HIML 5 网 页 中 ， 混 合 使 用 大 小 写 是 允许 的 。 从 编写 
HTML 5 代码 的 惯例 角度 来 看 , DOCTYPE 通常 用 大 写字 母 来 声明 ， 而 HTML 标签 则 用 小 写 表 
示 。 代 码 2.1 中 的 源 代码 编写 格式 就 遵循 了 这 个 惯例 。 


2.1.2 <head> 成 员 元 素 

网 页 <head> 部 分 用 于 定义 样式 规则 、 引 用 样式 表 和 脚本 语言 ,或 者 用 于 网 页 本 身 属性 等 相 
关 信息 的 描述 等 。 

1. 网 页 的 标题 


网 页 标题 是 显示 在 浏览 器 标题 栏 中 的 若干 主题 说 明文 字 ， 如 图 2.1 所 示 为 清华 大 学 主页 上 
的 网 页 标题 。 


较 清 华 大 学 - Tsinghua Unive x 
€ SC (www.tsnghua.edu.cn/publsh/th/index,html 


图 2.1 浏览 器 标题 栏 中 的 标题 和 图 标 (来 源 :清华 大 学 网 站 ) 


从 原则 上 说 ， 一 个 HTML 5 文档 (不 是 一 个 Web 页 面 ， 因 为 一 个 HTML 5 文档 可 以 表现 为 
多 个 网 页 。 一 个 文档 也 能 是 一 个 字符 流 ， 而 不 是 一 个 文件 ) 的 <head> 部 分 必须 包含 一 个 ， 并 且 
只 能 包含 一 个 <title> 元 素 。 但 是 这 并 不 是 绝对 的 ， 如 果 一 个 HIML 5 文档 被 用 作 电 子 邮 件 的 内 
容 ， 则 <title> 元 素 部 分 可 以 省 略 。 

代码 2.2 演示 了 通过 <title> 元 素 声 明 网 页 内 容 主 题 (标题 ) 的 方法 。<title> 元 素 的 使 用 方法 十 
分 简单 ， 只 需要 把 文字 放 在 <title> 元 素 的 内 容 中 即 可 。 

代码 2.2 通过 <title> 元 素 声明 网 页 主题 

<!DOCTYPE html> 

<html> 
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<head> 
<meta charset="UTF-8"> 
<title> 鲸 的 世界 </title> 
</head> 


<body> 
<p> 
</body> 
</html> 


2. 网 页 的 图 标 


在 图 2.1 中 ， 我 们 在 浏览 器 的 标题 栏 上 除了 看 到 网 页 标题 以 外 ， 在 标题 文字 的 旁边 ， 还 很 
容易 找到 网 页 的 图 标 。 网 页 的 图 标 是 通过 <link> 元 素 实 现 的 。 

<link> 元 素 用 于 链接 当前 HTML 文档 和 其 他 资源 。<link> 元 素 必须 包含 rel 属性 或 者 
itemprop 属性 中 的 一 个 ， 但 是 ， 不 允许 同时 使 用 这 两 个 属性 。 这 两 个 属性 中 的 rel 是 个 常用 属 
性 ， 用 于 说 明 所 链接 的 资源 与 当前 文档 的 关系 。 当 使 用 rel 属性 时 ，<link> 元 素 只 允许 在 <head> 
的 范围 内 使 用 ， 而 当 使 用 itemprop 属性 时 ，<link> 元 素 既 可 以 包含 在 网 页 的 <head> 部 分 ， 也 可 
以 包含 在 网 页 的 <body> 部 分 。 当 我 们 为 一 个 网 页 链接 网 页 图 标 时 ， 应 该 按照 代码 2.3 所 演示 的 
方法 ， 指 定 rel 属性 的 值 为 “icon”， 并 且 通 过 href 属性 指向 实际 所 链接 的 图 标 资源 文件 ， 这 样 
就 能 得 到 如 图 2.2 所 示 的 效果 。 


代码 2.3 ”通过 <link> 元 素 引 用 网 页 图 标 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 鲸 的 世界 </title> 
<link rel="icon" href="images/whale.ico"> 
</head> 


<body> 
<p> 
</body> 
</html> 


3 注意 : ”在 Chrome 等 浏览 器 中 测试 代码 2.3 时 ， 需 要 Web 服务 器 的 支持 才能 正确 显示 网 
页 图 标 ， 而 在 Firefox 浏览 器 中 ， 则 不 需要 Web 服务 器 的 支持 。 


CC | 0 localhost/icHoZ/icon.html 


2.2 ”网 页 的 标题 与 图 标 
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在 不 同 的 使 用 场合 中 ， 网 页 图 标 也 被 称 为 快捷 图 标 、 书 签 图 标 ， 或 者 标签 页 图 标 等 。 图 标 
文件 一 般 采 用 16x16 像素 的 ICO 文件 , 也 可 以 采用 GIF, 或 者 PNG 等 图 片 格式 。 另 外 , 在 <link> 
元 素 中 ， 可 以 通过 type 属性 声明 所 链接 的 图 标 文件 的 MIME 类 型 。 

- 些 读者 可 能 会 注意 到 一 些 网 页 有 类 似 <link rel=“shortcut icon”href- favicon.ico”> 的 用 
法 ， 而 shortcut 并 不 是 HIML 5 中 rel 属性 有 效 的 属性 值 。 实 际 上 ，rel=“shortcut icon” 的 用 法 在 
HTML 5 中 是 允许 的 ， 但 这 仅仅 是 为 了 满足 向 过 去 的 HTML 版 本 兼容 的 要 求 ， 如 果 在 rel 属性 
中 使 用 shortcut 属性 值 ， 另 一 个 属性 值 icon 必须 紧 随 其 后 ， 而 且 两 个 属性 值 之 间 必须 使 用 一 个 
空格 来 分 隔 。 


3. 网 页 的 样式 


层 登 式样 式 表 CSS 在 Web 设计 中 起 到 了 网 站 风格 统一 、 用 户 界 面 美观 、 优 化 用 户 体验 等 
作用 。 定 义 和 引 用 样式 规则 有 3 种 常见 的 方式 : 在 特定 的 元 素 上 通过 定义 style 属性 值 的 方法 
为 相应 的 元 素 添加 样式 规则 、 通 过 <style> 元 素 定义 样式 规则 ， 通 过 <link> 元 素 引 用 外 部 样式 文 
件 中 的 样式 定义 。 其 中 后 两 种 方法 一 般 都 在 <head> 的 范围 内 完成 。HTML 5 允许 使 用 只 作用 在 

-个 特定 局 部 范围 内 的 样式 定义 ， 在 这 种 情况 下 ，<style> 元 素 也 会 出 现在 网 页 的 <body> 部 分 。 
有 关 HTML 5 对 于 CSS 这 种 新 增加 的 特殊 用 法 ， 本 书 将 在 第 3 章 中 介绍 。 

代码 2.4 和 2.5 在 浏览 器 中 的 实际 显示 效果 是 一 样 的 ， 它 们 都 是 通过 样式 来 定义 ， 使 网 页 

的 正文 内 容 实现 如 图 2.3 所 示 的 效果 ， 以 斜体 字形 式 显示 。 


代码 2.4 通过 <style> 元 素 在 网 页 文档 内 部 定义 样式 规则 


<!DOCTYPE html> 
<html> 
<head> 

<meta charset="UTF-8"> 

<title>HTML5 - style</title> 

<style> 

.hello { 
font-style: italic; 


} 
</style> 
</head> 
<body> 
<div class="hello"> 你 好 ，HTML51</div> 
</body> 
</html> 


代码 2.5 ”通过 <link> 元 素 引 用 样式 表 文 件 (此 处 省 略 样式 表 文 件 ) 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>HTML5 - link</title> 
<link rel="stylesheet" type="text/css" href="css/style external.css"> 
</head> 
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<body> 
<div class="hello"> 你 好 ，HTML5!</div> 
</body> 
</html> 


口 hrmus -ink 
和 © 口 ocahost/cHozAs 


众 HTML5! 


2.3 在 <head> 部 分 通过 样式 定义 或 引用 外 部 样式 表 来 改变 网 页 内 容 的 表现 形式 


综合 代码 23 和 2.5， 两 者 都 用 到 了 <link> 元 素来 链接 外 部 资源 文件 , 其 中 的 不 同 点 是 在 rel 
属性 中 所 描述 的 外 部 资源 类 型 。 当 使 用 rel=“stylesheef" 链 接 一 个 样式 表 文 件 时 ,即使 省 略 MIME 
类 型 措 述 type="“texvess”， 浏 览 吕 仍然 能 够 正确 解析 样式 表 文 件 , 但 如 果 MIME 类 型 描述 错误 ， 
即使 链接 的 URL 正确 ， 浏 览 器 仍 不 能 以 正确 的 MIME 类 型 来 处 理 样式 表 文件 。 也 就 是 说 ， 从 
HTML 5 技术 标准 的 角度 看 ， 一 旦 MIME 类 型 描述 错误 ,样式 表 文件 就 会 失效 。 在 实际 应 用 当 
中 ， 某 些 浏览 器 会 优先 判断 el 属性 中 的 资源 类 型 ， 即 使 MIME 类 型 措 述 不 匹配 ， 济 览 器 仍然 
能 够 正确 处 理 样式 表 文件 。 需 要 注意 的 是 ， 这 里 的 正确 处 理 ， 是 依赖 于 浏览 器 容错 性 能 的 ， 而 
不 是 HTML 5 技术 规范 所 要 求 的 。 
4 脚本 程序 


<script> 元 素 用 于 定义 或 者 引用 在 其 他 脚本 程序 中 的 文件 ， 它 可 以 用 在 <head> 部 分 ， 也 可 
以 用 在 <body> 部 分 。 当 <script> 元 素 出 现在 <head> 部 分 时 ， 通 常 是 用 于 定义 全 局 性 的 变量 与 函 
数 ， 引 用 外 部 脚本 程序 ， 或 者 在 网 页 加 载 以 后 执行 某 一 段 程序 等 。 

下 面 的 代码 片段 用 于 全 局 性 的 定义 : 


<script> 


Var timeout = 6000; 
</script> 


当 <scrip 信 元素 用 于 引用 外 部 脚本 程序 时 ， 可 见 以 下 代码 片段 : 
<script src="../js/jQuery-1.9.1/jquery-1.9.1.min.js"></script> 


JavaScript 是 Web 开发 中 最 常用 的 脚本 语言 , 它 的 MIME 类 型 用 text/javascript 来 表示 。 在 
HTML 5 中 ， 如 果 <scrip 伺 元素 的 type 属性 省 略 ， 则 <script 元 素 中 所 代表 的 脚本 语言 是 
JavaScript。<scrip 亿 元 素 中 允许 使 用 其 他 脚本 语言 ， 当 这 种 情况 出 现时 ，<script> 元 素 必须 通过 
type 属性 表明 所 用 脚本 语言 的 种 类 。 一 些 程序 员 或 许 会 记得 ， 在 过 去 的 HTML 网 页 文件 中 ， 
<script> 元 素 中 常常 用 language 属性 来 说 明 脚 本 语言 的 种 类 。language 属性 在 HTML 5 中 已 经 
不 再 使 用 ， 而 且 HIML 5 要 求 浏览 器 当 检 测 到 <script> 元 素 中 使 用 了 type 属性 时 ，language 属 
性 将 被 忽略 掉 。 

Web 客户 端 脚本 程序 通常 是 由 JavaScript 等 解释 型 语言 开发 的 。 当 脚本 程序 被 成 功 加 载 以 
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后 , 就 会 立即 执行 , 而 不 需要 等 到 整个 网 页 文件 加 载 完 成 。HIML 5 的 <script> 元 素 包 括 了 async 
和 defer 两 个 布尔 型 (boolean) 属 性 ， 这 两 个 属性 必须 与 src 属性 配合 使 用 。asyne 属性 表示 当前 
引用 的 JavaScript 程序 以 异步 方式 运行 。defer 属性 表示 所 引用 的 JavaScript 程序 延迟 到 网 页 文 
档 加 载 完 成 以 后 运行 。 
随 | 说 明 : ”布尔 型 的 数据 仅 有 true 或 者 false 两 个 值 .在 HTML 5 中 , 当 async、defer、checked 
或 者 disabled 等 布尔 型 属性 出 现时 ， 它 的 值 为 tue， 和 否则 为 false。 当 使 用 布尔 型 
属性 时 ， 属 性 值 可 以 是 空 字符 囊 、 一 个 与 属性 名 相同 的 ASCII 字符 串 (大 小 写 无 
关 )， 或 者 省 略 。 以 下 3 种 表达 方法 的 作用 是 一 致 的 : 
<script src="js/myInitialization.js" defer></script> 


<script src="js/myInitialization.js" defer=""></script> 
<script src="js/myInitialization.js" defer="defer"></script> 


5. <meta> 元 素 


<meta> 元 素 是 在 网 页 的 <head> 部 分 用 于 描述 网 页 元 数据 的 元 素 。 这 里 所 指 的 元 数据 , 不 是 
广义 上 的 “元 数据 ”。 在 HIML 中 ,广义 上 的 元 数据 包括 了 <head>、<title>、<base>、<link>、 
<style> 和 <meta> 等 元 素 。 

在 代码 2.1 中 已 经 见 到 了 第 一 个 使 用 <meta> 元 素 的 元 数据 描述 : <meta charset=“UTF-8”>。 
很 明显 , 它 是 一 个 用 于 描述 当前 文档 字符 编码 的 说 明 。HTML 5 建议 所 有 的 新 建文 档 使 用 UTF-8 
编码 。 当 一 个 HTML 文档 不 是 以 BOM 字 节 开始 (有 关 BOM, 可 参阅 本 书 1.4.2 小 节 中 的 介绍 )， 
并 且 字符 编码 没有 明确 描述 时 , 这 个 文档 的 编码 只 允许 使 用 ASCIT 字符 。HTML 5 规定 文档 的 
字符 编码 必须 明确 指明 ， 因 为 用 户 可 以 从 网 页 的 表单 中 填写 数据 ， 只 有 当 字 符 编码 被 明确 说 明 
时 ， 非 ASCI 字符 集中 的 字符 才能 被 正确 处 理 。 

charset 属性 是 HTML 5 中 为 <meta> 新 增 的 属性 。<meta> 元 素 中 其 他 元 数据 的 描述 基本 上 
可 分 为 name/content( 标 准 元 数据 名 ) 和 http-equiv/content( 标 注 指令 ，Pragma Directive) 两 大 类 ， 
其 中 content 属性 值 用 于 说 明 元 数据 描述 的 内 容 。 

下 面 通过 几 个 实例 ， 来 对 <meta> 元 素 有 更 直观 的 认识 : 

<meta name="keywords" content="HTML5, CSS3, jQuery, jQuery Mobile"> 

<meta name="author™" content=" 张 欣 毅 "> 

<meta name="description" content="jQuery Mobile 移动 网 站 开发 教程 "> 


<meta name=generator content="Notepad++"> 
<meta name="application-name" content="jQuery Mobile 实例 "> 


<meta http-equiv="en"> 

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta http-equiv="refresh" content="120"> 

<meta http-equiv="refresh" content="120; URL=anotherPage.html"> 


在 上 述 实 例 中 ，name=“application-name” 仅 允许 在 Web 应 用 程序 中 使 用 。 由 于 HIML 5 已 
经 可 以 通过 <html> 标 签 的 lang 属性 描述 网 页 内 容 所 用 的 语言 ( 见 2.1.1 小 节 ), 早 期 版 本 的 HTML 
网 页 中 <meta http-equiv=“enm”> 这 样 的 用 法 建议 不 再 使 用 。 另 外 ，http-equiv=“content-type” 与 完 
前 介绍 的 charset 属性 的 实际 作用 相同 ， 在 网 页 开发 过 程 中 ， 只 能 用 它们 两 者 之 一 ， 不 可 同时 
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使 用 。http-equiv=“refresh”* 的 作用 相当 于 在 网 页 上 设置 一 个 以 秒 为 单位 的 定时 器 ， 这 个 定时 器 
能 够 触发 浏览 器 自由 刷新 当前 的 网 页 ， 或 者 加 载 由 URL 指定 的 另 一 个 网 页 。 


2.1.3 ”标准 属性 


标准 属性 (Universal Attribute) 在 HTML 5 的 范畴 内 可 以 理解 为 对 于 所 有 HTML 5 元 素 广 泛 
适用 的 属性 ， 甚 至 包括 了 在 现行 HTML 5 规范 中 还 没有 被 定义 的 元 素 。 虽然 标准 属性 可 以 广泛 
应 用 到 所 有 的 元 素 上 ,但 是 ， 由 于 许多 属性 本 身 的 含义 和 功能 定义 ， 只 能 在 某 些 特定 的 元 素 上 
发 挥 作用 ， 这 也 就 意味 着 应 用 到 某 些 元 素 上 的 标准 属性 ， 并 不 一 定 会 起 作用 。 即 使 代码 中 的 标 
准 属性 不 起 作用 ，HTML 5 网 页 文档 本 身 仍然 是 一 个 有 效 的 文档 。 标 准 属性 从 其 功能 上 可 以 分 
为 两 类 : 普通 元 素 属性 和 事件 处 理 属性 。HTML 5 中 定义 了 大 量 的 标准 属性 ， 这 里 介绍 其 中 的 

- 些 常用 属性 。 


1. 普通 元 素 属性 


普通 元 素 属性 并 不 是 严格 定义 的 术语 。 这 类 属性 包括 在 前 面 已 介绍 过 的 lang、class、style， 
还 包括 id、accesskey、translate、spellcheck、draggable、hidden、title、contextmenu 等 。 

id 元 素 用 来 在 HTML 文档 中 唯一 标识 一 个 特定 的 元 素 , 即 在 同一 个 HTML 文档 中 id 的 属 
性 值 不 可 重复 。 代 码 2.6 中 ， 有 两 个 div 元 素 被 分 别 用 id 属性 赋予 唯一 的 标识 符 。 通 过 元 素 的 
id 值 来 动态 处 理 HTML 文档 ,将 在 本 书后 续 章 节 中 的 CSS 3、JavaScript、jQuery 和 jQuery Mobile 
中 大 量 用 到 。 


代码 2.6 ”通过 id 属性 在 HTML 文 档 中 唯一 标识 一 个 元 素 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 全 局 变量 - id</title> 
</head> 


<body> 
<div id="div1"> 第 一 个 div</div> 
<div id="div2"> 第 二 个 div</div> 
</body> 
</html> 
accesskey 也 是 一 个 常用 的 属性 ， 用 于 为 屏幕 上 的 表单 或 者 链接 等 建立 快捷 键 , 这 样 ， 用 户 
就 可 以 通过 键盘 快速 定位 到 表单 中 的 某 一 特定 的 输入 框 ， 或 者 直接 触发 一 个 链接 。 代 码 2.7 演 
示 了 一 个 如 图 2.4 所 示 的 含有 两 个 文本 输入 框 和 一 个 链接 的 表单 。 两 个 文本 框 被 分 别 赋予 快捷 
键 a 和 b， 超 级 链接 被 赋予 快捷 键 q。 
代码 2.7 通过 accesskey 属 性 建立 快捷 定位 和 直接 触发 链接 


<!DOCTYPE html> 
<html> 
<head> 
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<meta charset="UTF-8"> 
<title> 全 局 变量 - accesskey</title> 
</head> 


<body> 
<form method="post" action="#"> 
<input name="inputboxl” placeholder=" 快 捷 键 : a" accesskey="a"> 
<br> 
<input name="inputbox2” placeholder=" 快 捷 键 : b" accesskey="b"> 
<br> 
<a href="http://www.tsinghua.edu.cn” accesskey="q"> 清 华 大 学 </a> 
</form> 
</body> 
</html> 


口 全 局 变量 - accesskey 
所 @ | 0 locahost/cHO2/attr_acce 


图 2.4 含有 快捷 键 的 网 页 

现在 的 主流 浏览 器 都 支持 快捷 访问 , 但 是 , 不同 的 浏览 器 对 于 快捷 键 的 用 法 略 有 不 同 。 在 
正和 Chrome 中 ， 通 过 “Alt+ 快 捷 键 ”的 组 合 方式 使 用 快捷 功能 ， 而 在 Firefox 中 ， 则 需要 通过 
“Shift+Altt+ 快 捷 键 ”的 组 合 方式 进行 。 

2. 事件 处 理 属性 

事件 处 理 属 性 是 为 了 应 对 在 网 页 上 发 生 的 鼠标 动作 、 页 面 加 载 等 事件 而 设置 的 属性 。 事 件 
处 理 属性 的 属性 值 通常 是 引用 一 段 事 件 处 理 脚本 程序 ， 或 者 是 直接 使 用 一 个 脚本 程序 片段 。 

常见 的 事件 处 理 属性 有 onload、onclick、onchange、onblur、nonfocus、onkeydown、onkeypress、 
onkeyup、onmousedown、onmouseup、onmouseover、onsubmit、onselect、onscroll 等 。 这 类 事 
件 处 理 属 性 将 在 本 书 第 4 章 中 介绍 jQuery 事件 处 理 时 ， 以 及 在 后 续 章 节 中 讲解 jQuery Mobile 
的 定制 方法 时 多 次 用 到 。 


2.2 HTML 5 常用 元 素 简 介 


本 节 将 介绍 在 HIML 5 网 页 的 <body> 部 分 中 常见 的 元 素 。 通常 , 这 些 元 素 用 于 构建 网 页 的 
布局 结构 、 定 义 网 页 内 容 的 显示 格式 ， 以 及 建立 表单 和 链接 等 。 
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2.2.1 组 织 结 构 元 素 


组 织 结构 (sections) 元 素 着 眼 于 网 页 内 容 的 总 体 布 局 ， 包 括 最 基本 的 <body> 元 素 ， 也 包括 用 
于 网 页 内 容 的 页 头 、 页 尾 等 基本 结构 。 
1. <body> 


<body> 是 网 页 内 容 正文 的 容器 。<body> 与 一 系列 网 页 加 载 /卸载 ， 实 时 通信 等 事件 紧密 相 
关 ， 而 这 其 中 最 常见 的 是 onload 事件 。 如 果 网 页 中 有 以 下 声明 ,网 页 就 会 在 加 载 完成 以 后 立即 
执行 由 onload 属性 规定 的 事件 处 理 程序 : 


<body onload="myOonloadHandler () "> 


<body> 元 素 的 ononline 和 onoffline 事件 处 理 属性 用 于 判断 网 页 目前 正 处 于 在 线 或 者 离线 
状态 。 但 是 ， 这 两 个 属性 在 目前 的 不 同 浏览 器 中 的 表现 有 很 大 差异 。 主 要 区 别 在 于 ， 不 同 浏览 
器 对 于 离线 状态 采用 不 同 的 定义 ， 因 此 ， 这 两 个 事件 处 理 属 性 并 不 是 十 分 可 靠 的 。 网 站 的 开发 
者 即使 不 使 用 这 两 个 属性 ， 仍 然 可 以 利用 Ajax 等 技术 十 分 容易 地 实现 判断 网 站 的 在 线 状态 。 
这 个 功能 对 于 需要 长 时 间 在 线 的 Web 应 用 程序 十 分 有 用 。 

<body> 元 素 的 onmessage 事件 处 理 属性 能 够 用 于 实现 嵌 套 网 页 的 跨 域 通信 。 网 站 开发 者 在 
使 用 跨 域 的 脚本 程序 调用 和 信息 传递 时 ， 需 要 理解 网 站 安全 隐患 和 XFS 攻击 方式 。 这 些 内 容 
不 在 本 书 的 范围 内 ， 这 里 只 做 概念 上 的 介绍 。 

2. <h1> ~ <h6>、<hgroup> 


<hl> ~ <h6>， 这 6 个 元 素 在 浏览 器 上 显现 为 从 大 到 小 的 6 种 不 同 的 字体 尺寸 。HITML 中 
还 有 <small> 和 <big>(<big> 在 HIML 5 中 已 经 被 取消 ) 等 元 素 也 能 用 来 代表 字体 大 小 。 这 里 的 区 
别 是 ，<small> 元 素 仅仅 代表 字体 在 浏览 器 中 显示 的 大 小 ， 而 对 于 网 页 的 内 容 的 实际 意义 并 不 
关注 ，<hl> ~ <h6> 则 代表 了 标题 文字 分 别处 于 6 个 不 同 的 级 别 ， 字 体 的 大 小 代表 了 当前 标题 
所 处 的 地 位 。<hl> ~ <h6> 对 于 网 页 的 内 容 是 紧密 相关 的 。 
如 果 一 篇 文章 同时 拥有 主 标题 、 副 标题 ， 以 及 更 多 层级 的 子 标题 ，<hgroup> 元 素 能 够 实现 
标题 分 组 。 例 如 下 面 的 代码 片段 : 
<hgroup> 
<h1> 主 标题 1</h1> 
<h2> 副 标题 1-1</h2> 
</hgroup> 
<hgroup> 
<h1> 主 标题 2</h1> 
<h2> 副 标题 2-1</h2> 
</hgroup> 
<hgroup> 的 原始 设计 思想 是 通过 这 个 元 素 使 标题 中 的 <h1> ~ <h6> 元 素 与 文档 大 网 (outline) 
中 使 用 <hl> ~ <h6> 元 素 加 以 区 分 ， 使 HIML 5 的 文档 结构 在 逻辑 上 更 加 清晰 。<hgroup> 已 经 
被 主流 浏览 器 认可 并 采用 ， 但 是 ， 这 个 元 素 仍然 存在 很 多 争议 。 目 前 W3C 没有 在 W3C 版 的 
HTML 5 规范 中 接受 这 个 元 素 。 因 此 ， 网 页 开发 人 员 应 该 谨慎 使 用 这 个 元 素 。 
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3. <section> 


<section> 元 素 在 网 页 文档 中 定义 了 逻辑 上 一 个 内 容 相对 完整 的 单元 。 这 个 单元 通常 包含 了 
头 部 、 内 容 大 纲 、 尾 部 等 结构 。 直 观 地 说 ， 如 果 用 报纸 上 的 一 个 版 面 代表 一 个 网 页 ， 那 么 ， 这 
个 版 面 上 的 一 篇 文章 就 可 以 用 一 个 <section> 元 素来 定义 。 每 一 个 <section> 元 素 都 是 这 个 版 面 整 
体 的 一 部 分 。 例 如 代码 2.8 中 ， 通 过 <section> 元 素 分 别 定 了 两 个 单元 。 每 个 段落 可 以 各 自 设立 
自己 的 标题 、 正 文 和 结尾 等 。 

代码 2.8 通过 <section> 元 素 在 网 页 中 定义 相对 独立 的 段落 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 元 素 - section</title> 
</head> 


<body> 
<h1> 新 中 国体 育 大 事 记 </h1> 
<section> 
<h2>“ 零 的 突破 ”</h2> 
<p>1984 年 ， 许 海峰 于 奥运 的 男子 自选 手枪 项 目 ， 以 566 环 的 成 绩 夺 得 该 届 
奥运 会 首 枚 金牌 一 一 50 米 手枪 慢 射 金牌 ， 是 中 国 奥运 会 金牌 “ 零 的 
突破 ”</p> 


</section> 


<section> 
<h2> 北 京 申办 2022 年 冬 奥 </h2> 
<p> 第 二 十 四 届 冬 季 奥 林 匹 克 运 动 会 ， 是 未 来 体育 竞赛 ， 而 且 国 际 奥 林 
匹克 委员 会 尚未 组 织 筹 委 会 。 国 际 奥 委 会 执 委 会 将 于 2014 年 7 月 
确定 候选 城市 ， 并 将 于 2015 年 7 月 31 日 在 马来西亚 首都 吉隆 坡 举行 
的 第 127 届 国 际 奥 委 会 全 体会 议 上 决定 主办 权 。</p> 
<p> 申 办 城市 有 : 波兰 克拉 科 夫 、 挪 威 奥斯陆 、 哈 萨克斯 坦 阿拉 木 图 、 
乌克兰 利 沃 夫 、 中 国 北京 </p> 
</section> 
<p> 资 料 来 源 :维基 百科 </p> 
</body> 
</html> 


上 述 代 码 在 浏览 器 中 有 如 图 2.5 所 示 的 显示 效果 。 网 页 的 终端 被 <section> 元 素 划 分 出 两 个 
单元 。 我 们 还 将 介绍 <div> 等 元 素 ， 那些 元 素 也 能 把 一 个 网 页 划分 为 多 个 部 分 。HTML 5 非常 注 
重 每 一 个 标签 的 含义 ，<section> 用 于 划分 在 内 容 上 各 自 独 立 的 单元 ， 而 不 只 是 在 网 页 布局 上 的 
划分 。 带 有 明确 含义 的 标签 和 单纯 用 于 显示 格式 的 标签 的 区 分 ,一 直 贯 穿 在 HTML 5 的 各 种 标 
签 中 ， 是 HIML 5 的 一 个 重要 设计 思想 。 

<section> 元 素 不 应 该 被 看 作 是 一 个 一 般 意义 上 的 标签 容器 。 如 果 仅 仅 是 为 了 利用 <section> 
元 素 定义 一 个 段落 以 便 使 用 样式 表 ， 那 就 应 该 使 用 <div> 元 素 ， 而 不 是 <section>。 
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新 中 国体 育 大 事 记 


“和 零 的 突破 ” 


1984 年 ， 许 海峰 于 奥运 的 男子 自选 手枪 项 目 ， 以 555 环 的 成 绩 夺 得 该 届 奥运 会 首 枚 金牌 一 一 50 米 手枪 慢 
射 生 牌 是 中 国 奥 运 会 室 乍 "地 的 突破 ~ 


北京 申办 2022 年 冬 奥 


第 二 十 四 居 冬 季 愉 林 匹 克 运 动 会， 是 未 条 体育 竞赛 ， 而 且 国际 办 林 匹克 委员 会 尚未 组 织 筹 委 会 。 国 际 导 

委 会 执 委 会 将 于 2014 年 7 月 We et 并 将 于 2015 年 7 月 31 日 在 马来西亚 首都 训 隆 起 举行 的 第 127 居 
国际 奥 委 会 全 体会 议 上 决定 主 

申办 城市 有 :被 兰 克拉 科 夫 ， 氨 威 瑞 斯 陆 、 哈 萨克斯 坦 阿拉 木 图 、 乌克兰 利 沃 太 、 中 国 北京 


资料 来 源 ， 维 基 百 科 


2.5 通过 <section> 建 立 的 两 个 相对 独立 的 内 容 段落 


4. <address> 


<address> 顾 名 思 义 ， 就 是 地 址 。<address> 仅 用 于 联系 方式 ， 不 可 以 当 作 其 他 用 途 使 用 ， 也 
不 可 以 包含 与 联系 方式 不 相关 的 内 容 。 下 面 是 一 个 典型 的 <address> 片 段 : 
<address> 
联系 作者 : <a href="mailto:xinyi.zhangelive.com"> 张 欣 毅 </a><br> 
Linkedin: http://ca.linkedin.com/in/xinyizhang<br> 
加 拿 大 安大略 伯 灵 顿 
</address> 
在 上 面 的 代码 片段 中 , <address> 元 素 中 包括 了 联系 人 、 电 子 邮 件 、 网 站 、 地址 等 联系 信息 。 
其 他 联系 信息 ， 例 如 电话 、 传 真 等 ， 也 可 以 安排 在 <address> 标 签 的 范围 中 ， 因 此 ，<address> 
的 确切 含义 是 联系 信息 ， 而 不 仅仅 是 地 址 。 但 是 ， 如 果 想 要 在 网 页 中 表现 一 个 与 联系 信息 无 关 
的 地 址 ，<p>、<div> 以 及 <span> 等 元 素 则 更 适合 。 下 面 代 码 中 的 使 用 方法 是 不 正确 的 : 
<div> 
今天 我 们 参观 了 位 于 
<address>260 Adelaide St E, Toronto</address> 


的 约克 镇 邮局 。 这 是 多 伦 多 的 第 一 个 邮局 ， 建 于 1834 年 ， 现 在 仍然 在 正常 使 用 。 


</div> 


5.<header> 和 <footer> 


<header> 和 <footer> 本 身 不 是 用 于 划分 单元 的 元 素 ， 而 是 用 于 辅助 <section> 等 元 素 建立 内 
容 相对 独立 性 的 单元 。<header> 和 <footer> 代 表 了 网 页 中 一 个 单元 的 头 部 和 尾部 。<header> 元 素 
通常 包含 了 由 <hl> ~ <h6> 等 构成 的 标题 ， 在 内 容 上 ，<header> 元 素 可 以 当 作 标志 图 案 、 目 录 、 
搜索 表单 等 的 容器 。<footer> 元 素 常 用 于 描述 网 页 本 身 的 信息 ， 包 括 作 者 、 版 权 、 相 关 的 外 部 
链接 等 。 

<header> 和 <footer> 不 是 必须 出 现 的 元 素 ， 内 容 也 没有 固定 的 格式 要 求 ， 所 出 现 的 位 置 既 
可 在 <section> 中 , 也 可 在 <article> 中 , 甚至 直接 在 <body> 中 。 代码 2.9 与 2.8 在 内 容 上 非常 相似 。 
如 果 把 网 页 的 <body> 部 分 整体 地 看 作 是 一 个 单元 , 网 页 中 含有 由 <section> 划 分 处 理 的 两 个 独立 
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子 单元 ， 而 在 这 两 个 子 单元 前 后 的 两 个 部 分 则 分 别 是 这 个 网 页 的 头 尾 两 个 部 分 。 代 码 2.8 已 经 
通过 <hl> 和 <p> 分 别 在 表现 形式 上 做 出 标识 ， 而 代码 2.9 则 更 进一步 地 用 <header> 和 <footer> 在 
逻辑 上 做 出 明确 的 划分 。 


代码 2.9 使 用 <header> 和 <footer> 对 网 页 内 容 做 语义 上 的 划分 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 元 素 - header/footer</title> 
</head> 


<body> 
<header> 
<h1> 新 中 国体 育 大 事 记 </h1> 
</header> 
<section> 
<h2>“ 零 的 突破 ”</h2> 
<p>1984 年 ， 许 海峰 于 奥运 的 男子 自选 手枪 项 目 ， 以 566 环 的 成 绩 夺 得 该 届 
奥运 会 首 枚 金牌 一 一 50 米 手枪 慢 射 金牌 ， 是 中 国 奥运 会 金牌 “ 零 的 
突破 ”</p> 
</section> 
<section> 
<h2> 北 京 申 办 2022 年 冬 奥 </h2> 
<p> 第 二 十 四 届 冬 季 奥 林 匹 克 运动 会 ， 是 未 来 体育 竞赛 ， 而 且 国际 奥 林 
匹克 委员 会 尚未 组 织 筹 委 会 。 国 际 奥 委 会 执 委 会 将 于 2014 年 7 月 
确定 候选 城市 ， 并 将 于 2015 年 7 月 31 日 在 马来西亚 首都 吉隆 坡 举 行 
的 第 127 届 国 际 奥 委 会 全 体会 议 上 决定 主办 权 。</p> 
<p> 申 办 城市 有 : 波兰 克拉 科 夫 、 挪 威 奥斯陆 、 哈 萨克斯 坦 阿 拉 木 图 、 
鸟 克 兰 利 活 夫 、 中 国 北京 </p> 
</section> 
<footer> 
<p> 资 料 来 源 : 维基 百科 </p> 
<address> 网 页 制作 : 
<a href="mailto:xinyi.zhang@live. com"> 张 欣 毅 </a> 
</address> 
</footer> 
</body> 
</html> 


6. <nav> 


nav， 即 navigation， 也 就 是 导航 的 意思 。<nav> 元 素 定义 了 一 个 具有 导航 意义 的 独特 单元 。 
它 包含 了 一 系列 链接 ， 这 些 链接 可 以 根据 网 站 的 需要 指向 其 他 网 站 , 或 者 指向 自己 所 在 网 站 的 
-个 网 页 ， 或 者 指向 当前 网 页 中 的 一 个 部 分 ( 错 点 )。 很 多 网 站 都 设计 有 一 个 如 图 2.6 所 示 的 导 
航 单元 。 从 用 户 的 角度 来 看 ， 它 就 像 网 站 的 主 菜 单 。 
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mobile 


Demos Download AplDocumentation Themes Resources Blog About 


图 2.6 jQuery Mobile 网 站 上 的 导航 单元 (来 源 : jQuery Mobile 网 站 ) 
<nav> 元 素 中 的 链接 仅 用 于 网 页 导航 的 目的 , 服务 于 其 他 目的 的 链接 不 应 该 放 在 <nav> 元 素 
中 。 代码 2.10 演示 了 含有 3 个 导航 链接 的 网 页 ， 其 中 第 一 个 指向 外 部 网 站 ,其 他 两 个 链接 分 别 
指向 网 页 内 的 两 个 单元 。 
代码 2.10 ”含有 导航 单元 的 网 页 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 元 素 - nav</title> 
</head> 


<body> 
<header> 
<nav> 
<h1> 新 中 国体 育 大 事 记 </h1> 
<ul> 
<li><a href="http://www.olympic.cn/"> 中 国 奥 委 会 </a></1i> 
<1li><a href="#summerOlympic"> 夏 季 奥 运 会 </a></1i> 
<li><a href="#winterOlympic"> 冬 季 奥运 会 </a></1i> 
</ul> 
</nav> 
</header> 


<div style="height:300px; ">&nbsp;</div> 
<a id="summerOlympic"></a> 
<section> 
<h2>“ 零 的 突破 ”</h2> 
<p>1984 年 ， 许 海峰 于 奥运 的 男子 自选 手枪 项 目 ， 以 566 环 的 成 绩 夺 得 该 届 
奥运 会 首 枚 金牌 一 一 50 米 手枪 慢 射 金牌 ， 是 中 国 奥运 会 金牌 “ 零 的 
突破 ”</p> 
</section> 
<div style="height:300px; ">&nbsp;</div> 
<a id="winterOlympic"></a> 
<section> 
<h2> 北 京 申办 2022 年 冬 奥 </h2> 
<p> 第 二 十 四 届 冬 季 奥 林 匹 克 运 动 会 的 申办 城市 有 : 波兰 克拉 科 夫 、 挪 威 
奥斯陆 、 哈 萨克斯 坦 阿拉 木 图 、 乌 克 兰 利 沃 夫 、 中 国 北京 </p> 
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</section> 
<xdiv style="height:300px; ">gnbsp;</div> 
<footer> 
<p> 实 例 演示 - 导航 </p> 
</footer> 
</body> 
</html> 


2.2.2 ”链接 元 素 


链接 元 素 由 <link>、<a> 和 <area> 等 组 成 ， 它 们 都 具有 在 当前 HTML 文档 和 外 部 资源 之 间 
建立 连接 的 功能 。 在 本 章 的 实例 代码 2.3 和 2.5 中 , 我 们 已 经 介绍 了 使 用 <link> 元 素 为 网 页 添加 
图 标 和 样式 文件 的 用 法 。<link> 元 素 还 能 通过 不 同 的 type 属性 值 链接 其 他 种 类 的 外 部 资源 ， 这 
里 不 再 详 述 。 


[图 | 说 明 :， HTML 5 对 元 素 的 归 类 有 部 分 重 登 。 比 如 <a> 元 素 还 属于 文本 类 型 元 素 。 


1. <a> 


<a> 是 个 常用 的 元 素 ， 它 拥有 多 种 功能 ， 最 常见 的 是 定义 一 个 链接 ， 比 如 在 代码 2.10 中 ， 
<a> 元 素 所 代表 的 链接 分 别 指向 中 国 奥 委 会 网 站 和 当前 网 页 中 由 锚 点 来 定位 的 单元 内 容 。 同时 ， 
<a> 元 素 还 具有 了 定义 锚 点 的 功能 。 
下 面 的 HTML 网 页 片段 取 自 代码 2.10， 分别 代表 了 指向 外 部 网 页 和 页 面 自身 的 一 个 锚 点 : 
<a href="http://www.olympic.cn/"> 中 国 奥 委 会 </a> 
<a href="#summerolympic"> 夏 季 奥 运 会 </a> 
如 果 一 个 <a> 元 素 指向 一 个 网 页 ， 元 素 的 href 属性 值 既 可 以 使 用 绝对 路 径 ， 也 可 以 使 用 相 
对 路 径 。 当 一 个 <a> 元 素 指向 一 个 锚 点 时 ， 锚 点 名 称 前 必须 用 “#” 符 号 标识 。 同 样 ， 这 个 锚 点 
可 以 处 在 当前 的 网 页 中 ， 也 可 以 处 在 另外 一 个 网 页 中 。#summerOlympic 代表 了 在 当前 网 页 中 
的 锚 点 位 置 ， 而 anotherPage.html#summerOlympic 则 代表 了 在 另外 一 个 网 页 中 的 锚 点 位 置 。 
锚 点 ， 就 是 网 页 中 的 一 个 参照 点 。 当 网 页 内 容 很 长 时 ， 可 以 帮助 网 站 用 户 非 常 快速 地 定位 
到 所 需要 查找 的 内 容 。 例 如 ,在 代码 2.10 中 ,同一 个 网 页 的 内 容 包 含 了 夏季 奥运 会 和 冬季 奥运 
会 , 当 用 户 只 需要 查看 与 冬季 奥运 会 相关 的 内 容 时 , 可 以 通过 点 击 指向 冬季 奥运 会 锚 点 的 链接 ， 
在 网 页 上 快速 定位 。 
在 代码 2.10 中 , 我 们 看 到 可 以 通过 以 下 方法 定义 锚 点 ， 即 通过 使 用 id 元 素 定义 锚 点 名 称 : 
<a id="winterOlympic"></a> 
姆 注意 :在 HTML 5 之 前 的 版 本 中 ， 锚 点 是 由 <a> 元 素 的 name 属性 来 定义 的 。 虽然 很 多 
支持 HTML 5 的 浏览 器 仍然 保留 着 对 <a> 元 素 中 name 属性 的 支持 , HIML 5 网 页 
验证 程序 也 能 认可 name 属性 , 但 是 name 属性 确实 已 经 从 HIML 5 的 <a> 元 素 中 
被 删除 了 。 使 用 <a> 元 素 时 ， 应 当 注意 到 这 个 变化 。 
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2. <area> 


<area> 元 素 代 表 了 一 个 图 片 中 的 可 被 点 击 的 区 域 。 这 个 区 域 可 以 是 矩形 、 圆 形 等 规则 图 形 ， 
也 可 以 是 多 边 形 等 不 规则 图 形 。 使 用 <area> 时 必须 满足 以 下 条 件 : 

@ ”<area> 必 须 以 <map> 元 素 为 父 节点 。 

@ ”使 用 <img> 在 网 页 中 放置 一 个 图 片 时 , 必须 同时 使 用 usemap 属性 为 这 幅 图 片 指定 一 个 

值 ， 以 便 在 <map> 元 素 中 引用 。 

e@ ”在 <map> 元 素 中 通过 name 属性 引用 先前 已 经 定义 的 图 片 。 

@ ”使 用 px 为 单位 来 定义 坐标 。 

<area> 元 素 通过 shape 属性 支持 4 种 形状 , 分别 由 属性 值 circle( 圆 形 )、default( 默 认 )、poly( 多 
边 形 )、rect( 和 矩形 ) 表 示 。 需 要 特别 注意 的 是 ， 当 shape 属性 值 为 default 时 ， 可 点 击 的 区 域 包括 
整 张 图 片 。 当 属性 缺 省 时 ， 系 统 默 认 的 shape 属性 值 为 rect， 不 是 default。 

当 shape 属性 值 为 default 时 ,由 于 可 点 击 的 区 域 为 整 张 图 片 , 所 以 不 允许 使 用 coords 属性 
来 设置 区 域 范围 。 在 其 他 情况 下 ， 必 须 使 用 coords 属性 来 明确 定义 区 域 范围 的 坐标 。 坐 标 参 数 
的 个 数 ， 根 据 区 域 形状 的 不 同 而 有 所 变化 。 图 2.7 中 是 一 个 圆 形 区 域 和 算 形 区 域 的 坐标 设置 方 
法 示意 图 。 图 中 最 外 层 的 矩形 代表 一 幅 图 片 。 


2.7” 圆 形 和 和 矩形 区 域 的 坐标 设置 示意 


当 区 域 形 状 是 圆 形 时 ，coords 的 属性 值 使 用 3 个 整数 来 代表 圆 形 区 域 的 范围 。 这 3 个 整数 
值 依次 是 : 图 片 左边 界 到 圆 形 区 域 左 边界 的 距离 ， 图 片 的 上 边界 到 圆 形 区 域 上 边界 的 距离 ， 以 
及 圆 形 的 半径 。 也 可 以 用 (X,Y, R) 来 表示 。 

区 域 形状 为 矩形 时 ， 使 用 4 个 整数 值 来 代表 矩形 区 域 的 范围 。 这 4 个 整数 值 依次 是 矩形 
区 域 左上 角 的 坐标 CXu YD)， 和 矩形 区 域 右 下角 的 坐标 (X2, Y2?)。 

图 2.7 中 ， 线 上 的 数字 是 该 坐标 值 在 coords 属性 中 的 出 现 顺序 。 当 区 域 形状 是 多 边 形 时 ， 
coords 的 属性 值 必须 成 对 出 现 ， 至 少 3 对 ， 代 表 一 个 三 角形 。 每 一 对 整数 值 代表 了 图 片上 的 一 
个 坐标 点 ， 这 些 坐 标点 必须 依次 出 现 ， 围 成 所 需要 定义 的 可 被 点 击 区 域 的 范围 。 

在 图 2.8 中 ， 东 方 明珠 的 图 片上 已 经 用 和 矩形 框 标 出 两 个 区 域 ， 分 别 在 东方 明珠 电视 塔 上 和 
图 片 底部 的 黄浦 江上 。 

代码 2.11 利用 坐标 ， 并 按照 前 面 介绍 的 方法 去 定义 规则 , 实现 了 这 两 个 区 域 的 定义 。 通过 
<area> 元 素 定义 的 区 域 具有 与 通过 <a> 元 素 建立 的 超级 链接 一 样 的 功能 ， 这 两 个 元 素 中 的 href 


卜 
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属性 都 能 够 用 于 指向 一 个 网 页 的 地 址 ， 或 者 引用 一 段 JavaScript 程序 。 


€ 3 © 0 locahost/cHo2/ee map_areahtm 


2.8 在 网 页 图 片上 利用 坐标 定义 可 点 击 的 区 域 


代码 2.11 利用 <map> 和 <area> 元 素 把 图 片 分 割 为 若干 可 点 击 的 区 域 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 元 素 - map / area</title> 
</head> 


<body> 
<div id="picture"> 
<img src="images/shanghai 1.jpg" alt=" 上 海 东 方 明珠 " 
width="198" height="292" 
usemap="#0rientalPearlTower" /> 
<map name="OrientalPearlTower"> 
<area shape="rect" coords="100,50,120,255"” alt=" 东 方 明珠 " 
href="javascript:alert(' 东 方 明 珠 ') "> 
<area shape="rect" coords="3,270,190,290" alt=" 黄 浦江 " 
href="javascript:alert( ' 黄 浦江 ') "> 
</map> 
</div> 
</body> 
</html> 


2.2.3 ”分 组 元 素 


1. <hr> 


<hr> 是 一 个 没有 结束 标记 的 元 素 ， 在 网 页 的 代码 中 ， 它 只 能 以 <hr> 的 形式 表现 。 在 浏览 器 
中 ，<hr> 显 示 为 一 条 水 平 直线 。HTML 5 为 <hr> 元 素 赋予 的 语义 是 网 页 内 容 上 的 分 段 ， 比 如 故 
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事 从 一 个 场景 切换 到 另外 一 个 场景 ， 或 者 在 描述 事物 的 过 程 中 从 一 个 主题 过 渡 到 另外 一 个 主 
题 。 而 在 HIML 5 之 前 的 版 本 中 ，<hr> 元 素 只 代表 了 一 条 水 平 直线 ， 对 于 网 页 的 内 容 没 有 任何 
含义 。 

2. <pre> 


网 页 上 的 内 容 经 常会 出 现 一 些 不 规则 的 格式 ， 比 如 需要 预 留 空 行 、 字 符 之 间 的 多 个 空格 、 
- 段 格式 已 经 编辑 好 的 计算 机 程序 代码 等 。 在 正常 的 HIML 处 理 过 程 中 ， 空 格 、 空 行 等 都 会 

被 浏览 器 自动 过 滤 移 除 ， 如 果 需 要 保留 , 则 必须 通过 HTML 代码 <br> 和 &nbsp; 等 实现 。 而 使 用 
<pre> 元 素 ， 这 些 问 题 就 能 很 容易 地 得 到 解决 。 

<pre> 元 素 用 于 包含 具有 特殊 显示 格式 要 求 的 文字 ， 比 如 诗歌 、 程 序 代码 等 。 根 据 <pre> 开 
始 和 结束 标签 之 间 的 不 同 内 容 ，<pre> 还 经 常 包括 下 列 类 型 的 元 素 : 当 内 容 含有 程序 代码 时 ， 
程序 代码 应 该 用 <code> 标 识 ; 当 内 容 含 有 计算 机 输出 的 样本 时 ， 程 序 代 码 应 该 用 <samp> 标 识 ; 
而 当 内 容 含 有 键盘 输入 的 样本 时 ， 程 序 代码 应 该 用 <kbd> 标 识 。 这 里 提 到 的 <code>、<samp> 和 
<kbd> 都 是 属于 与 文本 相关 的 元 素 。 


3. <p> 


<p> 定 义 了 一 个 文章 中 的 自然 段 。 在 网 页 输出 时 ， 自 然 段 的 前 后 多 预 留 一 些 空白 ， 用 以 区 
分 段落 。 在 HTML 5 中 <p> 元 素 只 拥有 全 局 属性 , 在 以 往 HTML 版 本 中 <p> 元 素 所 支持 的 属性 ， 
已 经 从 HTML 5 中 删除 了 。 

有 很 多 组 织 结构 类 的 元 素 也 能 与 <p> 元 素 一 样 在 网 页 的 显示 上 实现 分 段 功 能 。HTML 5 特 
别 强调 了 语义 上 的 区 分 。 如果 在 网 页 中 需要 以 段落 的 形式 表现 一 段 联系 信息 ， 这 段 联系 信息 应 
该 包含 在 <address> 元 素 中 ， 而 不 应 该 使 用 <p>。 

4. <dl>、<dt>、<dd> 


<dl>、<dt>、<dd> 是 一 组 用 于 “描述 (description)” 的 元 素 。HTML 5 中 的 语义 区 分 “描述 ” 
和 “定义 (definition)”， 当 网 页 中 需要 用 到 “定义 ”时 ， 应 该 使 用 <dfn> 元 素 。 

<dl> 是 “描述 ”的 容器 ，<d> 容 器 的 内 容 允 许 为 空 ， 或 者 包含 一 个 或 多 个 描述 。 每 一 组 描 
述 由 <de> 和 <dd> 组 成 ， 并 且 在 这 一 组 描述 中 ，<dt> 和 <dd> 是 必需 的 ， 不 可 缺 省 。<dt> 用 于 表达 

-个 正在 被 描述 的 事物 ， 而 <dd> 则 包含 了 描述 文字 。 每 一 组 描述 中 的 <dt> 和 <dd> 元 素 允 许 出 现 

多 次 ， 但 是 ， 在 一 组 描述 中 ，<de> 必 须 出 现在 <dd> 之 前 。 

代码 2.12 演示 一 个 含有 两 组 描述 的 <dl> 列 表 。 每 一 组 描述 都 是 <d 忆 在 前 ,<dd> 在 后 ,而 不 
是 使 用 一 个 特定 的 元 素来 定义 每 一 组 描述 。 

代码 2.12 ”包含 两 组 描述 的 <dl> 描 述 列表 

<!IDOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 


<title> 元 素 - dl / dt / dd</title> 
</head> 
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<body> 
<dl> 
<dt> 平 行 线 <dt> 
<dqd> 在 一 个 平面 上 两 条 不 相交 的 直线 </dd> 
<dd> 在 一 个 平面 上 两 条 在 无 限 远 处 相交 的 直线 </dda> 
<dat> 三 角形 <at> 
<dqd> 每 个 三 角形 都 有 三 条 边 </dd> 
<dq> 三 角形 的 三 个 内 角 之 和 是 180”</dd> 
</dl> 
</body> 
</html> 


在 HIML 5 中 ，<dl>、<d 忆 和 <dd> 的 目的 是 “描述 ”这 些 元 素 中 内 容 的 含义 (再 次 强调 ， 
这 里 是 指 “说 明 /描述 ”， 而 非 “ 定 义 ”)， 浏 览 器 会 决定 如 何在 网 页 中 使 用 内 置 的 样式 来 表现 
这 些 元 素 。 网 页 开发 人 员 也 可 以 通过 CSS 更 精确 地 定义 显示 方式 。 图 2.9 是 上 述 两 组 描述 在 浏 
览 器 中 的 默认 显示 。 


口 元 素 -d/ 直 /dd 
€ @ | 0 locahost/CHo2/ele_d_dt_dd.html 


平行 线 
在 一 个 平面 上 两 条 不 相交 的 直线 
在 一 个 平面 上 两 条 在 无 限 远 处 相交 的 直线 


每 个 三 角形 都 有 三 条 边 
三 角形 的 三 个 内 角 之 和 是 180* 


图 2.9 <dl>、<dt> 和 <dd> 所 定义 的 “描述 ”在 浏览 器 中 的 默认 显示 方式 
5. <ul>、<ol>、<li> 


<ul> 和 <ol> 分 别 是 指 有 序 和 无 序列 表 ， 它 们 的 区 别 仅 在 于 是 否 为 每 个 列表 项 目 添加 序号 。 
每 一 个 <li> 元 素 代 表 列 表 中 的 一 个 项 目 。 

当 <li> 元 素 出 现在 有 序列 表 中 时 ，<li> 除 了 拥有 标准 属性 以 外 ， 还 有 一 个 value 属性 。 它 的 
属性 值 必须 是 代表 顺序 的 整数 。 当 列表 在 浏览 中 显示 时 ， 浏 览 器 将 使 用 value 属性 值 来 代替 序 
号 ， 但 是 显示 顺序 仍 为 <li> 元 素 在 代码 中 的 出 现 顺序 。 如 果 value 属性 值 缺 省 ， 浏 览 器 会 自动 
地 为 这 个 列表 项 目 添加 顺序 值 。 

代码 2.13 中 的 有 序列 表 使 用 了 <l 这 元 素 的 value 属性 。 列 表 中 的 项 目 将 按照 代码 顺序 依次 
显示 ， 而 每 个 项 目的 序号 将 采用 value 属性 的 属性 值 ， 如 图 2.10 所 示 。 


图 2.10 有 序列 表 中 的 顺序 标注 
46 < 


代码 2.13 ”使 用 <li> 元 素 的 value 属 性 指定 顺序 标注 


<1!1DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 元 素 - ol / li</title> 
</head> 


<body> 
<ol> 
<li value="1"> 一 </1i> 
<1i value="3"> 三 </1i> 
<li value="2"> 二 </1i> 
</ol> 
</body> 
</html> 
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有 序列 表 的 type 属性 用 于 指定 如 表 2.2 中 所 示 的 5 种 顺序 标注 方式 之 
的 reserved 属性 能 使 <li> 以 递减 的 顺序 标注 ， 第 一 个 <1i> 项 目的 顺序 号 码 等 同 于 列表 中 所 有 <li> 


数量 的 总 和 。 


表 2.2 有 序列 表 <ol> 中 的 顺序 标注 方式 


关键 字 
| 大 S 拉 Ts 字母 | 和 
i | 小 53 娄 3 | i 
1 | S93 | 
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-。 另 外 ，<ol> 元 素 


<ul> 元 素 代表 的 无 序列 表 说 明了 列表 中 的 项 目 与 顺序 无 关 ， 因 此 ，<li> 元 素 中 不 允许 使 用 
value 属性 来 描述 列表 项 目的 序号 。HTML 5 对 <ul> 元 素 的 重要 改变 是 删除 了 compact 和 type 
两 个 属性 ， 其 中 type 是 在 过 去 版 本 的 HTML 网 页 中 的 常用 属性 。 这 两 个 被 删除 的 属性 应 该 用 


CSS 替代 。 


6. <div> 


在 以 上 “分 组 元 素 ” 的 介绍 中 ， 我 们 认识 了 这 样 一 些 元 素 标签 : 内 容 分 组 、 预 定义 格式 、 
分 段 、 事 物 描述 、 列 表 等 。HTML 5 中 还 有 其 他 一 些 元 素 也 属于 这 一 类 别 ， 但 是 在 后 续 章节 的 
jQuery Mobile 学 习 中 没有 直接 使 用 ， 这 里 不 再 介绍 。 如 果 网 页 的 内 容 需要 分 组 (或 分 类 )， 但 是 
无 法 把 内 容 归 类 为 以 上 任何 一 个 类 型 ， 这 样 就 需要 一 个 通用 的 元 素来 实现 一 个 通用 容器 的 需 
求 ，<div> 就 是 这 样 一 个 元 素 。HTML 5 注重 元 素 标签 的 含义 ， 而 网 页 表现 形式 更 多 的 是 由 CSS 
来 实现 。 在 HIML 5 中 ，<div> 元 素 没有 特别 的 含义 。 这 样 一 个 通用 的 容器 ， 在 jQuery Mobile 


等 与 网 页 表现 直接 相关 的 JavaScript 框架 设计 上 十 分 重要 。 
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2.2.4 与 文本 相关 的 元 素 


1. <em>、<strong>、<code>、<samp>、<kbd>、<var>、<dfn> 


在 2.2.3 小 节 对 分 组 元 素 的 介绍 中 ， 我 们 已 经 使 用 到 了 <code>、<samp>、<kbd> 等 与 文本 
相关 的 元 素 。 这 几 个 元 素 分 别 具 有 计算 机 代码 、 计 算 机 输出 样本 、 键 盘 输入 样本 等 含义 。 除 此 
之 外 ，<dfn> 用 于 定义 一 个 术语 或 者 专 有 名 词 ，<var> 用 于 定义 一 个 变量 ， 这 个 变量 可 以 是 数学 
变量 、 计 算 机 程序 中 的 变量 、 常 数 标识 符 、 一 个 具有 数量 含义 的 符号 ， 或 者 是 一 个 函数 中 的 参 
数 ; <em> 表 示 在 其 标签 范围 内 的 内 容 需要 特别 强调 ; 而 <strong> 则 表示 在 其 标签 范围 内 的 内 容 
非常 重要 。 

这 一 组 标签 都 有 各 自 的 含义 , 但 是 , 它们 在 浏览 器 中 的 显示 情况 取决 于 浏览 器 的 内 置 样式 ， 
HTML 5 本 身 没有 规定 这 些 元 素 的 显示 方式 。 当 使 用 这 一 组 元 素 时 , 还 需要 配合 使 用 CSS 才能 
达到 正确 的 显示 效果 。 


2. <small>、<b>、<u>、<i> 


这 一 组 中 的 4 个 元 素 标签 分 别 代表 了 小 字体 、 粗 体 、 下 划 线 和 和 斜体， 这 些 元 素 直 接 与 在 浏 
览 器 中 的 显示 相关 ， 与 网 页 中 的 内 容 没 有 关系 。 这 些 从 早期 HTML 版 本 中 继承 来 的 元 素 与 
HTML 5 的 设计 理念 相悖 。 在 HTML 5 网 页 设计 中 不 建议 使 用 这 些 元 素 。 


3. <sub>、<sup> 


<sub>、<sup> 分 别 表 示 下 标 和 上 标 。 下 标 和 上 标 是 在 数学 表达 式 、 化 学 反应 式 中 常常 会 用 
到 的 符号 。 

HTML 5 允许 把 MathML 和 SVG 等 非 HTML 5 的 元 素 作为 嵌入 式 内 容 加 入 到 HTML 5 网 
页 中 。 如 果 网 页 中 需要 大 量 用 到 复杂 的 数学 公式 和 符号 ， 建 议 使 用 MathML， 但 是 ， 如 果 仅 仅 
用 到 下 标 和 上 标 ，<sub> 和 <sup> 则 是 一 个 非常 方便 的 选择 。 代 码 2.14 通过 数学 表达 式 和 化 学 
反应 方程 式 来 说 明 <sub> 和 <sup> 的 用 法 。 


代码 2.14 利用 <sub> 和 <sup> 标 签 实现 表达 式 中 的 下 标 和 上 标 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 元 素 - sup / sub</title> 
</head> 


<body> 
<h4> 因 式 分 解 (二 项 式 定理 ) </h4> 
<div> 
(at+b) <sup>2</sup>=a<sup>2</sup>+2abtb<sup>2</sup> 
<br> 
(a-b) <sup>2</sup>=a<sup>2</sup>-2ab+b<sup>2</sup> 
</div> 
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<hr> 
<h4> 直 线 方程 (点 斜 式 ) </h4> 
<div> 
y-y<sub>0</sub>=k (x-x<sub>0</sub>) 
</div> 
<hr> 
<h4> 置 换 反 应 </h4> 
<div> 
Zn + H<sub>2</sub>SO<sub>4</sub> = 
H<sub>2</sub> + ZnSO<sub>4</sub> 
</div> 
</body> 
</html> 


4. <span> 


与 <div> 元 素 一 样 ，<span> 本 身 没有 特别 的 含义 。 但 是 它 与 <div> 的 不 同 之 处 在 于 <div> 是 一 
个 “ 块 级 元 素 ”(Block Level Elements)， 而 <span> 是 一 个 “内 联 元 素 ”(Inline Elements)，HTML 
中 ， 大 部 分 元 素 属 于 这 两 个 种 类 之 一 。 块 级 元 素 在 显示 时 ， 会 在 其 前 后 加 入 换行 ， 而 内 联 元 素 
在 显示 时 不 会 加 入 换行 。 这 就 是 为 什么 <div> 元 素 以 默认 方式 显示 时 总 是 另 起 一 行 ， 而 <span> 
元 素 中 的 内 容 不 会 有 这 种 显示 效果 的 原因 。 


5. <br> 
<br> 表 示 换 行 。 这 是 HTML 中 最 简单 、 最 常用 的 标签 之 一 
2.2.5 表单 


常见 的 表单 ， 比 如 电子 商务 网 站 上 的 订单 等 ， 是 以 <form> 为 基础 的 一 个 网 页 结构 ， 它 的 常 
用 目的 是 收集 用 户 输入 的 信息 ， 然 后 发 送 到 服务 器 上 。 一 个 表单 也 可 以 不 直接 向 用 户 显示 , 或 
者 不 用 于 发 送 数 据 。 一 个 HTML 网 页 可 以 拥有 多 个 表单 。 

1. <form> 


<form> 元 素 在 网 页 上 建立 一 个 表单 ， 在 表单 中 可 以 按照 需要 放 入 按钮 、 文 本 框 、 列 表 等 。 
<form> 元 素 中 ， 常 见 的 有 method、action、target 这 3 个 属性 。method 属性 是 指 表单 数据 发 送 
的 方式 ， 比 如 get 或 者 post。 当 使 用 get 方式 发 送 表 单数 据 时 ， 用 户 输入 的 数据 会 以 查询 字符 
串 的 形式 ( 键 值 对 ) 添 加 到 发 送 目标 链接 的 URL 中 , 发 送 方 可 以 在 浏览 器 的 地 址 栏 中 看 到 所 发 送 
的 数据 。 当 使 用 post 方式 发 送 表单 数据 时 ， 用户 输入 的 数据 被 加 入 到 HTTP 请 求 的 message 部 
分 ， 用 户 不 能 直接 看 到 这 些 数据 。action 属性 用 于 指定 表单 的 发 送 目标 地 址 URL。target 属性 
使 用 于 网 站 中 的 网 页 需要 在 多 个 浏览 器 窗口 中 同时 打开 的 情形 , 在 本 书 的 后 续 章 节 中 将 不 会 涉 
及 这 个 属性 。 


2. <label> 


<label> 元 素 能 够 为 <form> 的 表单 元 素 添加 标题 名 称 。 每 一 个 <label> 元 素 的 for 属性 与 表单 
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字段 的 id 属性 相 匹配 ， 实 现 一 一 对 应 。 比 如 代码 2.15 中 的 <label for=“usemame”>，for 的 属性 
值 是 “usermame”， 这 个 <label> 元 素 所 含 的 标题 文字 与 <input type=“text” name=“Uusername” 
id=“username”> 中 的 id 属性 值 一 致 。 


代码 2.15 ”通过 <label> 元 素 添加 表单 字段 的 标题 文字 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 元 素 - label</title> 
</head> 


<body> 
<form name="loginForm" action="#" method="post"> 
<label for="username"> 用 户 名 </1label> 
<input type="text" name="username" id="username"><br> 
<label] for="password"> 密 码 </label> 
<input type="password" name="password" id="password"><br> 
<input type="submit" name="login"” value=" 登 录 "><br> 
</form> 
</body> 
</html> 
在 上 面 的 用 法 中 ，<label> 标 题 元 素 和 <input> 字 段 元 素 没 有 媒 套 关系 ， 两 者 完全 通过 for 属 
性 和 id 属性 相关 联 。 如 果 <label> 元 素 中 的 for 属性 缺 省 ，<label> 元 素 可 以 包含 一 个 字段 元 素 ， 
并 为 它 添加 标题 文字 。 代 码 2.15 中 的 用 户 名 也 可 以 写成 下 面 的 形式 : 
<labe1> 用 户 名 <input type="text" name="username" id="username"></label> 
<label><input type="text" name="username" id="username"> 用 户 名 </label> 


其 中 标题 文字 既 可 以 出 现在 字段 之 前 ， 也 可 以 出 现在 字段 之 后 。 在 网 页 中 ， 多 选 框 所 用 的 
标题 文字 往往 出 现在 多 选 框 之 后 。 
3. <input> 及 其 不 同类 型 的 输入 方法 


HTML 5 为 表单 设计 了 许多 不 同类 型 的 用 户 输入 字段 ，<input> 是 其 中 一 个 主要 的 输入 方 
法 。<input> 中 的 各 种 输入 字段 依靠 type 属性 来 区 分 ， 常 见 的 type 属性 有 text( 文 本 输入 框 )、 
password( 密 码 )、radio( 单 选 按 钮 )、checkbox( 多 选 按钮 )、hidden( 隐 藏 字段 )、file( 文 件 上 传 )、 
reset( 表 单 重 置 按钮 )、submit( 表 单 发 送 按钮 )、button( 按 钮 )、image( 图 像 按 钮 )、number( 数 字 )、 
range( 数 字 范 围 )、date( 日 期 )、time( 时 间 )、datetime( 日 期 与 时 间 )、url( 网 址 )、email( 电 子 邮 件 )、 
tel( 电 话 号 码 ) 等 。 代 码 2.16 演示 了 其 中 大 部 分 <input> 类 型 的 典型 使 用 方法 ， 并 且 演 示 了 几 个 
<input> 类 型 的 常用 属性 。 


代码 2.16 各 种 类 型 的 <input> 


<!1DOCTYPE html> 
<html> 
<head> 
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<meta charset="UTF-8"> 
<title> 元 素 - input</title> 
<script> 
function showWeight (packageWeight) { 
document .getElementById ("showWeight") 
.innerHTML = packageWeight; 
} 
</script> 
</head> 


<body> 
<form method="post" action=" 
<label for="username"> 用 户 名 </1label> 


<input type="text" name="username" id="username" size=" 


maxlength="7"><br> 
<label for="password"> 密 码 </label> 
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<input type="password" name="password" id="password"><br> 


<label for= 

<input type="radio" name="delivery" 
id="diliveryPostalRegular"><br> 

<label for="diliveryExpress"> 送 货 方式 -快递 </label> 

<input type="radio" name="delivery" 
id="diliveryExpress"><br> 

<label for="diliveryInsurance"> 货 运 服务 -保险 </1label> 

<input type="checkbox" name="deliveryService" 
id="diliveryInsurance"><br> 

<label for="diliveryEvening"> 货 运 服务 -晚间 投递 </1abel> 

<input type="checkbox" name="deliveryService" 
id="diliveryEvening"><br> 

<label for="pickupDate"> 预 约 取 件 日 期 </1abel> 


"diliveryPostalRegular"> 送 货 方式 -平邮 </label> 


<input type="date" name="pickupDate" id="pickupDate"><br> 


<label for="pickupTime"> 预 约 取 件 时 间 </1label> 


<input type="time" name="pickupTime" id="pickupTime"><br> 


<span id="showWeight"></span>&gnbsp; gnbsp; 
<label for="favColor"> 选 择 包装 颜色 </1label1> 


<input type="color" name="favColor" id="favColor"><br> 


<label for="quantity"> 包 圳 数量 </1abe1> 

<input type="number" name="quantity" id="quantity" 
min="]" max="5"><br> 

<label for="phone"> 电 话 </label> 

<input type="tel" name="phone" id="phone"><br> 

<label for="email"> 电 子 邮件 </1abel> 

<input type="email" name="email" id="email"><br> 

<label for="website"> 公 司 网 站 </label> 

<input type="url" name="website" id="website"><br> 


<input type="hidden" name="hidden" value="hiddenField"> 


<input type="button"” name="agree" value=" 同 意 服务 条 款 "> 


<input type="image” src="images/no.png”alt=" 不 同意 服务 条 款 "> 


<input type="reset" name="reset" value=" 重 置 "> 
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<input type="submit" name="login"” value=" 登 录 "> 
</form> 
</body> 
</html> 
文本 输入 框 通常 使 用 maxlength 属性 来 限制 输入 字符 的 个 数 。 maxlength 属性 能 够 简化 表单 
的 验证 过 程 。 文 本 输入 框 还 可 以 用 size 属性 来 规定 输入 框 的 显示 宽度 ， 宽 度 与 用 户 实际 输入 的 
字符 数量 无 关 。 在 网 页 设计 时 ，CSS 能 够 更 加 精确 地 表现 输入 框 的 宽度 。min 和 max 属性 适用 
于 数值 类 型 (比如 type=“number”) 的 输入 框 ， 用 于 设置 输入 数值 的 下 限 和 上 限 。 
上 面 的 代码 演示 了 4 种 按钮 创建 方式 ，type 属性 值 分 别 是 reset、submit、button 和 image。 
这 些 属性 值 相对 应 的 按钮 类 型 分 别 是 重 置 (清除 所 有 已 经 输入 的 表单 内 容 )、 发 送 (表单 )、( 普 通 ) 
按钮 和 图 像 按钮 ， 其 中 的 图 像 按钮 和 发 送 按钮 一 样 ， 默 认 具 有 表单 发 送 功能 。 
当 用 户 点 击 type 属性 为 color 或 者 file 的 输入 框 时 ， 浏 览 器 会 启动 系统 的 调 色 板 或 者 文件 
选择 框 。 
焉 注意 : ”HTML 5 中 <input> 元 素 新 增加 的 类 型 并 没有 完全 得 到 主流 浏览 器 的 支持 。 例 如 ， 
在 代码 2.16 中 ， 当 type 属性 值 为 date、time 或 者 color 时 ，Chrome 浏览 器 能 够 
给 出 相应 的 提示 ， 而 Firefox 浏览 器 只 是 把 相应 的 字段 当 作 普 通 的 文本 输入 处 理 ， 


针对 电话 号 码 格式 的 输入 框 ， 当 用 户 输入 时 ， 可 能 
会 按照 浏览 器 能 够 识别 的 国家 /地 区 信息 自动 加 入 (或 显 
示 ) 空 格 、 插 号 、 加 号 和 减 号 等 。 是 否 添加 、 如 何 格 式 化 
用 户 输入 等 ， 由 浏览 器 决定 。 同 样 ， 在 支持 date 和 time 
等 类 型 的 浏览 器 中 ， 当 处 理 用 户 输入 时 ， 浏 览 器 可 能 会 
采用 不 同 的 方法 限定 输入 格式 。 

HTML 5 对 于 表单 元 素 在 屏幕 上 的 显示 方式 没有 具 
体 规 定 。 单 选 按 钮 、 多 选 按 钮 ( 即 复 选 框 )、 文 本 框 、 密 码 
输入 等 在 不 同 的 浏览 器 上 差别 比较 小 ， 而 日 期 、 数 字 、 
网 址 、 电 子 邮 件 等 <input> 类 型 在 显示 方式 上 的 差别 就 会 
比较 大 。 代 码 2.16 在 Chrome 浏览 器 中 的 初始 显示 状态 
如 图 2.11 所 示 。 

HTML 5 中 的 一 些 <input> 类 型 ， 如 email、number、 
ul、date 和 time 等 ， 具 有 输入 验证 功能 。HTML 5 仅仅 
提供 了 以 上 字段 验证 过 程 的 基本 原则 ， 具 体 到 每 一 种 浏 
览 器 中 的 实现 在 算法 和 错误 提示 方面 差别 较 大 .图 2.12 和 2.13 分 别 演示 了 部 分 字段 在 Chrome 
和 Firefox 浏览 器 中 的 错误 提示 信息 。 


4. 预定 义 的 <input> 文 本 输入 格式 


当 <input> 的 字段 类 型 为 email、url、number、date， 以 及 time 等 时 ， 一 些 主流 浏览 器 已 经 
按照 HTML 5 的 要 求实 现 了 基本 的 字段 有 效 性 验证 功能 。 虽 然 这 些 简单 的 客户 端 验证 并 不 能 
代 客 户 端 和 服务 器 端 数据 验证 ， 但 是 ， 这 样 的 基本 验证 能 力 能 够 大 大 减少 输入 错误 的 可 能 性 
类 似 于 HIML 5 为 上 述 这 些 输入 类 型 提供 的 内 置 数据 验证 能 力 ，HIML 5 通过 <input> 元 素 的 
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[同意 最 务 和 款 | 去 | 重要 | | 登录 | 


2.11 各 种 <input> 类 型 在 Chrome 
浏览 器 中 的 初始 显示 方式 
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pattern 属性 为 类 型 为 email、 password、 search、 tel、 text、 url 等 输入 类 型 提供 了 同样 基于 HTML 
层面 的 数据 验证 的 可 能 性 。pattern 的 属性 值 为 一 个 由 网 页 设计 人 员 设 计 的 正则 表达 式 , 浏览 器 
将 使 用 这 个 正则 表达 式 来 匹配 用 户 输入 到 相应 字段 的 字符 串 。 正 则 表达 式 能 够 检测 输入 的 字符 
是 字母 或 者 数字 ， 以 及 它们 的 位 数 是 否 符合 限定 条 件 ， 字 母 的 大 小 写 ， 空 格 与 符号 等 。 


预约 取 件 日 期 2555- 二 -aa xv 


预 的 取 件 时 间 | 一:-- 1 加 please enter a valid value. The 
选择 包装 颜色 革 是 field is incomplete or has an 
包 票数 量 invalid date. 
电子 邮件 
公司 网 站 [or 


月 总 服务 条 获 | 共 || 国 please enter a URL 


电子 邮件 |smail 工 
公司 网 站 
| 同意 服务 条 元 | 大 | 


回 please indude an'@'inthe email 
address. ‘email is missing an ‘@'. 


图 2.12 ”Chrome 浏览 器 对 date、email、url 类 型 的 输入 字段 所 给 出 的 验证 错误 信息 


电话 电子 邮件 
电子 邮件 Jab 2 人 TE 
公司 网 

同意 Please enter an emall address. Please enter a URL. 


2.13 ”Firefox 浏 览 器 对 email 和 url 类 型 的 输入 字段 所 给 出 的 验证 错误 信息 


代码 2.17 演示 了 一 些 常见 的 应 用 实例 ,这 段 代码 中 的 正则 表达 式 能 够 分 别 用 于 检测 数字 输 
入 、800 电话 号 码 、 中 国 6 位 数字 的 邮政 编码 、 美 国 5 位 数字 邮政 编码 ( 含 ZIP+4 扩展 编码 )、 
加 拿 大 字母 与 数字 混合 式 邮政 编码 、 国 际 标准 语言 代码 等 。 
代码 2.17 通过 <input> 元 素 的 pattern 属 性 限定 数据 输入 格式 
<!IDOCTYPE html> 
<html> 
<head> 


<meta charset="UTF-8"> 


<title>input 元 素 - pattern 属性 </title> 
</head> 


<body> 
<form action="#" method="post" > 

<label for="number"> 数 字 </label> 

<input type="text" name="number" id="number" value="" 
pattern="[0-9]*" /><br> 

<label for="phone800">800 电话 号 码 </label> 

<input type="text" name="phone800" id="phone800" value="" 
pattern="800 [0-9]*" /><br> 
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<label for="postalCN"> 中 国 邮政 编码 </1abe1> 

<input type="text" name="postalCN" id="postalCN" Value=" 
Pattern=" [0-9] {6}"><br> 

<label for="postalUS"> 美 国 邮政 编码 </Llabe1> 

<input 上 tyYpe="text"”name="postalUS"” idq="postalUS"” Value=" 
pattern="^\d{5} (?:[-\s]\d{4})?$" /><br> 

<label for="postalcA"> 加 拿 大 邮政 编码 </label> 

<input type="text" name="postalCA" id="postalCA" value=" 
pattern=" [A-2Z] [0-9] [A-Zz] [0-9] [A-Zz] [0-9]" /><br> 

<label for="langCode">ISO 语言 代码 </label> 

<input type="text" name="langCode" id="langCode" value="" 
pattern="[a-z] {2}"> 

</form> 
</body> 
</html> 


使 用 同样 的 方法 ， 我 们 还 可 以 为 国际 标准 国家 代码 、 跳 水 比赛 动作 编码 、 产 品 序列 号 等 很 
多 输入 验证 场合 设计 正则 表达 式 。 使 用 pattern 属性 和 正则 表达 式 也 有 十 分 明显 的 缺陷 。 首 先 ， 
主流 浏览 器 ， 比 如 Safari， 目 前 还 不 支持 pattem 属性 ， 这 就 会 使 网 页 上 的 数据 验证 失去 作用 ; 
其 次 ，HTML 5 并 没有 规定 怎样 来 显示 错误 信息 ， 因 此 验证 过 程 产生 的 错误 信息 的 显示 样式 、 
错误 信息 的 文字 描述 ， 以 及 信息 文字 的 本 地 化 等 情况 都 难于 预见 ， 这 就 会 导致 这 种 利用 pattem 
属性 的 方案 在 对 网 页 界面 设计 要 求 比较 高 的 情况 下 并 不 适用 。 代 码 2.17 在 Firefox 浏览 器 中 的 
潜 误 提示 是 把 输入 框 的 边框 变 成 红色 ， 但 没有 任何 文字 提示 。 

5. <input> 元 素 中 的 常见 布尔 型 属性 


前 面 已 经 提 到 HTML 5 中 的 布尔 型 属性 的 用 法 。HTML 5 中 的 布尔 型 属性 不 允许 被 直接 赋 
予 true 或 者 false。 <input> 元 素 拥 有 4 个 常用 的 布尔 属性 : readonly、 disabled、 required、 checked,， 
其 中 checked 属性 仅 适 用 于 单 选 和 多 选 按钮 。 前 3 个 属性 的 含义 分 别 是 只 读 、 失 效 和 必需 。 这 
些 属 性 的 字面 含义 已 经 清楚 地 说 明了 它们 在 网 页 表单 中 的 作用 , readonly( 只 读 ) 表 示 相 应 的 字段 
已 经 被 赋值 ， 该 字段 的 值 在 网 页 上 可 见 ， 但 是 用 户 无 法 更 改 。disabled( 失 效 ) 意 味 着 相应 的 字段 
暂时 失效 ， 浏 览 器 通常 会 以 灰色 来 表示 此 字段 暂时 无 效 。required( 必 需 ) 属 性 作用 在 表单 发 送 之 
前 ， 如 果 相 应 的 字段 没有 输入 任何 数据 ， 这 个 属性 会 阻止 发 送 表单 。checked( 已 选择 ) 属 性 代表 
相应 的 单 选 或 者 多 选 选项 在 网 页 加 载 时 自动 被 选择 。 示 例如 代码 2.18 所 示 。 


代码 2.18 <input> 元 素 的 4 种 常见 的 布尔 型 属性 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>input 元 素 - 布尔 型 属性 </title> 
</head> 


<body> 
<form action="http://localhost/myService" method="post"> 
<label for="f1"> 字 段 一 </label> 
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<input type="text" name="fl"” id="fl"” value=" 字 段 一 " 


readonly /><br> 
<label for="f2"> 字 段 二 </label> 


<input type="text" name="f2" id="f2"” value=" 字 段 二 " 


disabled /><br> 
<label for="f3"> 字 段 三 </label> 


<input type="text" name="f3" id="f3" value="" 


required /><br> 
<label for="f4 1"> 选 项 一 </1label> 


<input type="radio"” name="f4"” id="f4 1” value=" 选 项 一 "> 


<label for="f4 2"> 选 项 二 </label> 


<input type="radio"” name="f4" id="f4 2” value=" 选 项 二 " 


checked> 
<label for="f4_3"> 选 项 三 </label> 


<input type="radio" name="f4" id="f4 3" value=" 选 项 三 "> 


<hr> 
<input type="submit" value="Submit"> 


</form> 
</body> 
</html> 


与 其 他 基于 HTML 的 数据 验证 一 样 , 当 浏览 器 发 现 一 个 被 标记 为 required 的 字段 没有 任何 
输入 数据 时 , 会 按照 浏览 器 本 身 的 处 理 程序 显示 如 图 2.14 所 示 的 错误 信息 。 显 示 方 法 由 浏览 器 


因此 ， 这 种 基于 HTML 的 验证 不 适用 于 对 用 户 界面 要 求 比较 严格 的 应 用 场合 ， 而 基于 


JavaScript 的 客户 端 验证 ， 或 者 服务 器 端 验证 则 能 够 很 好 地 与 界面 设计 相 融 合 。 


Input 元 素 -布尔 型 属性 x 
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2.14 ” Chrome 浏览 器 发 现 required 字 段 没 有 被 赋值 时 的 错误 信息 


6. <button> 


前 面 代码 2.16 通过 <input> 元 素 的 type 属性 演示 了 4 种 不 同 的 按钮: 


<input type="button" name="agree" value=" 同 意 服务 条 款 " * 
<input type="image"” src="images/no.png”alt=" 不 同意 服务 条 款 "> 
<input type="reset" name="reset" value=" 重 置 " > 


<input type="submit" name="login"” value=" 登 录 " > 


type=“Teset" 代 表 了 一 个 “ 重 置 ”按钮 ， 用 于 清空 表单 ; type=“submit* 代 表 了 一 个 “发 送 ” 


按钮 ， 把 表单 中 的 用 户 输入 发 送 到 服务 器 ;type=“image” 表 现 为 一 个 “图 形 ” 按 钮 ， 它 的 作用 
相当 于 “发 送 ” 按 钮 ，type=“button” 显 示 为 一 个 没有 赋予 任何 功能 的 普通 按钮 ， 通 过 onclick 
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属性 可 以 为 其 添加 JavaScript 处 理 程序 ， 定 制 所 需 的 功能 。 

上 述 按钮 除了 图 形 按钮 以 外 ，HTML 5 通过 <button> 元 素 提供 了 实现 相同 功能 的 方法 。 从 
代码 2.19 中 可 以 看 到 ，<button> 元 素 也 有 一 个 type 属性 ， 属 性 值 也 同样 可 以 使 用 button、reset 
和 submit。 这 些 属性 值 所 代表 的 含义 与 <input> 元 素 中 相应 的 属性 值 一 致 。 如 果 <button> 元 素 没 
有 明确 指明 type 属性 ， 这 个 按钮 会 被 默认 为 type= “submif"， 即 一 个 发 送 按钮 。 
代码 2.19 通过 <button> 元 素 实现 3 种 按钮 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 元 素 - button</title> 
</head> 
<body> 
<form action="http://localhost/myService" method="post"> 
<label for="product"> 产 品 </label> 
<input type="text" name="product" id="product" value="" /> 
<hr> 
<button type="button"> 按 钮 </button> 
<button type="reset"> 重 置 </button> 
<button type="submit"> 发 送 </button> 
</form> 
</body> 
</html> 


逮 注意 :WHAT 工作 组 的 HTML 5 版 本 允许 在 <button> 元 素 中 使 用 type=“menu”， 而 W3C 
的 HTML 5 版 本 则 不 支持 这 个 属性 值 。 


7. 下 拉 列 表 - <select>、<option>、<optgroup> 


网 页 表单 中 ， 一 个 最 基本 的 下 拉 列 表 由 <select> 和 <option> 元 素 组 成 。<select> 是 一 个 下 拉 
列表 的 容器 ， 其 中 常用 的 属性 有 size 和 multiple。size 属性 表示 下 拉 列 表 在 网 页 中 显示 的 选项 
个 数 ， 如 果 选 项 较 多 ， 这 个 列表 就 会 自动 显示 一 个 垂直 滚动 条 。multiple 属性 表示 如 图 2.15 所 
示人 允许 用 户 同时 选择 多 个 选项 。 在 默认 情况 下 ， 用 户 只 能 选择 一 个 选项 。<option> 元 素 代表 了 
下 拉 列 表 中 的 一 个 选项 。 被 选择 的 <option> 元 素 中 ，value 属性 的 值 将 被 发 送 到 服务 器 。 

代码 2.20 ”一 个 被 限定 显示 6 个 选项 的 多 选 列表 


<!DOCTYPE htm]l> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 元 素 - select/option</title> 
</head> 


<body> 
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<form method="post" action="#"> 
<select size="6" multiple> 
<option value="PVG"> 上 海 浦东 国际 机 场 </option> 
<option value="LHR"> 伦 敦 希 思 罗 机 场 </option> 
<option value="JFK"> 纽 约 肯尼迪 国际 机 场 </option> 
<option value="YYZ"> 多 伦 多 皮尔 逊 国际 机 场 </option> 
<option value="NRT"> 东 京成 田 国际 机 场 </option> 
<option value="ICN"> 首 尔 仁川 国际 机 场 </option> 
<option value="BKK"> 曼 谷 素 万 那 普 机 场 </option> 
</select> 
</form> 
</body> 
</html> 


如 果 下 拉 列 表 中 的 选项 需要 按照 某 种 规则 分 组 ， 就 要 借助 于 <optgroup> 元 素 。 代码 2.21 演 
示 了 一 个 按照 国家 对 机 场 选项 进行 分 组 的 实例 ， 运 行 结果 如 图 2.16 所 示 。 


€ CC 口 localhosVcHc 空 三 G OD localhost/CHC 窜 


伦敦 希 思 罗 机 场 
纽约 肯 尼 巡 国际 机 声 


深圳 宝安 国际 机 场 
东京 成 田 国际 机 场 美国 

首尔 仁川 国际 机 场 纽约 肯尼迪 国际 机 场 
纽约 拉 瓜 迪 亚 机 场 
洛杉矶 国际 机 场 
拿 大 


多 伦 杀 皮尔 逊 国际 机 场 


图 2.15 多 选 列表 图 2.16 在 下 拉 列 表 中 分 组 


<select> 元 素 中 用 于 指定 列表 长 度 的 size 属性 , 除了 包括 各 个 <option> 选 项 外 ,也 包括 了 用 
于 分 组 的 <optgroup> 元 素 。 


代码 2.21 下 拉 列 表 选 项 分 组 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 元 素 - select/option/optgroup</title> 
</head> 


<body> 
<form method="post" action="#"> 
<select size=*10"> 
<optgroup label=" 中 国 "> 
<option value="PEK"> 北 京 首都 国际 机 场 </option> 
<option value="PVG"> 上 海 浦东 国际 机 场 </option> 
<option value="SZX"> 深 圳 宝安 国际 机 场 </option> 
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</optgroup> 

<optgroup label=" 美 国 "> 
<option value="JFK"> 纽 约 肯 尼 迪 国际 机 场 </option> 
<option value="LGA"> 纽 约 拉 瓜 迪 亚 机 场 </option> 
<option value="LAX"> 洛 杉 矶 国际 机 场 </option> 

</optgroup> 

<optgroup label=" 加 拿 大 "> 
<option value="YY2Z"> 多 伦 多 皮尔 逊 国际 机 场 </option> 
<option value="YUL"> 蒙 特 利 尔 特 鲁 多 国际 机 场 </option> 

</optgroup> 

<optgroup label=" 日 本 "> 
<option value="NRT"> 东 京成 田 国际 机 场 </option> 
<option value="KIX"> 大 阪 关 西 国际 机 场 </option> 

</optgroup> 

</select> 
</form> 
</body> 
</html> 


8. <textarea> 


<textarea> 元 素 会 在 网 页 上 建立 一 个 多 行 多 列 的 输入 框 。 如 果 说 <input> 元 素 当 属性 值 为 
“text” 时 显示 为 一 个 用 于 输入 简短 字符 串 的 文本 输入 框 ， 那 么 <textarea> 就 是 用 于 输入 一 段 或 
几 段 文字 的 文本 输入 框 。 

<textarea> 默 认 显示 为 2 行 20 列 。 我 们 也 可 以 通过 rows 和 cols 属性 指定 显示 的 行 数 和 列 
数 ，cols 属性 中 的 列 数 是 以 字符 的 平均 宽度 为 单位 的 。 如 果 需 要 精确 地 指定 <textarea> 在 浏览 器 
中 的 宽度 和 高 度 ， 应 该 使 用 CSS 实现 这 个 目标 。 

9. <fieldset> 和 <legend> 


当 一 个 表单 含有 很 多 输入 项 时 ， 为 了 从 内 容 上 便于 识别 和 使 用 这 些 字段 ， 可 以 通过 
<fieldset> 元 素 把 这 些 输 入 字段 划分 为 若干 个 字段 组 合 。 每 一 个 字段 组 合 都 可 以 用 <legend> 元 素 
添加 一 个 标题 。 代 码 2.22 演示 了 一 个 如 图 2.17 所 示 的 由 两 个 字段 组 合 而 成 的 表单 。 同 时 使 用 
<fieldset> 和 <legend> 元 素 时 需要 注意 的 是 ，<legend> 元 素 必须 是 <fieldset> 的 第 一 个 子 元 素 。 


代码 2.22 ”通过 <fieldset> 元 素 为 表单 中 的 字段 元 素 分 组 


<!1DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 元 素 - fieldset/legend</title> 
</head> 


<body> 
<form method="post" action="#"> 
<fieldset> 
<legend> 产 品 反馈 </legend> 
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<label for="model"> 产 品 型 号 </label> 
<input type="text" id="model™ 
Placeholder=" 请 输入 产品 型 号 . . . "><br> 
<label for="feedback"> 反 馈 </1abel> 
<textarea id="feedback" rows="5" cols="30" 
placeholder=" 请 输入 您 的 意见 和 建议 . . ."> 
</textarea> 
</fieldset> 
<fieldset> 
<legend> 联 系 信息 </legend> 
<label for="customer"> 客 户 </label> 
<input type="text" id="customer" name="customer"><br> 
<label for="email"> 电 邮 </1label> 
<input type="email" id="email" name="email"><br> 
</fieldset> 
<input type="submit" value=" 提 交 "> 
</form> 
</body> 
</html> 


| 元 要 -fieldset/egend x 
de @ DD localhost/CHO2/ele_fieldset.html 
广 产品 反馈 

产品 型 号 


2.17 由 <fieldset> 划 分 出 的 字段 组 合 与 由 <legend> 代 表 的 字段 组 合 标题 


2.2.6 多 媒体 


HTML 5 为 了 在 浏览 器 中 直接 支持 播放 多 媒体 资源 文件 ， 新 增 了 <audio>( 音 频 ) 和 <video> 
(视频 ) 两 个 元 素 。HTML 5 网 页 播放 多 媒体 文件 不 同 于 以 往 的 多 媒体 播放 模式 ， 它 不 需要 额外 
的 插件 ， 而 是 通过 浏览 器 内 置 的 媒体 支持 实现 的 。 这 种 播放 方式 带 来 了 便利 ,但 是 目前 支持 的 
媒体 类 型 仍然 十 分 有 限 ， 这 同样 也 是 一 个 明显 的 缺陷 。 当 使 用 <audio> 和 <video> 时 ， 应 当 注 意 
媒体 资源 的 MIME 类 型 与 浏览 器 的 兼容 性 ( 见 表 2.3 中 的 多 媒体 资源 MIME 类 型 和 浏览 器 兼容 
性 )。 当 然 ，Safari 等 浏览 器 也 可 以 选择 安装 vorbis 等 插件 实现 对 ogg@ 的 支持 ， 这 种 通过 插件 实 


@ ogg 原 泛 指 ogg 格式 的 音频 和 视频 资源 ，ogg 音频 和 视频 文件 使 用 相同 的 文件 扩展 名 ， 仅 以 MIME 类 型 来 
区 分 这 两 种 文件 。 按 照 ogg 的 新 标准 (2007)， 音 频 文件 使 用 扩展 名 oga， 视 频 文件 使 用 扩展 名 ogv。 
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现 多 媒体 功能 的 方案 不 在 HIML 5 本 身 的 范畴 之 内 。<audio> 和 <video> 元 素 的 用 法 相似 ， 这 里 
简要 介绍 <video> 元 素 的 使 用 方法 。 


表 2.3 <audio> 和 <video> 元 素 支持 的 多 媒体 资源 类 型 


文件 类 型 MIME Firefox 
audio/mpeg 


audio/wav， 


audio/ogg 


video/mp4 


Video/webm 


Video/oge 


<video> 元 素 的 典型 用 法 是 含有 一 个 或 者 多 个 <source> 元 素 ， 加 上 一 行 提示 文字 。 每 一 个 
<source> 元 素 对 应 着 一 个 视频 文件 。 浏览 器 会 依次 检测 是 否 支 持 <source> 元 素 中 的 多 媒体 资源 ， 
如 果 能 够 检测 到 被 浏览 器 支持 的 多 媒体 资源 , 就 会 在 浏览 器 上 显示 一 个 播放 器 , 并 根据 <video> 
元 素 的 preload 属性 决定 是 否 预 加 载 (在 网 页 加 载 的 同时 进行 加 载 ) 多 媒体 资源 , 如 果 浏 览 器 不 能 
检测 到 被 支持 的 多 媒体 资源 ， 就 会 显示 <video> 元 素 中 的 提示 文字 。 这 行文 字 通 常用 于 提示 用 
户 所 用 的 浏览 器 不 能 支持 网 站 视频 的 多 媒体 资源 类 型 ， 当 浏览 器 能 够 播放 <video> 元 素 中 列 出 
的 一 个 多 媒体 资源 时 ， 这 行 提示 文字 就 会 被 忽略 。 代 码 2.23 演示 了 <video> 元 素 的 典型 用 法 。 


代码 2.23 ”<video> 元 素 的 典型 用 法 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 元 素 - video</title> 
</head> 


<body> 
<video width="640" height="480" controls> 
<source src="video/greatwall.mp4" type="video/mp4"> 
<source src="video/greatwall.ogv" type="video/ogg"> 
您 的 浏览 器 不 支持 video 标签 。 
</video> 
</body> 
</html> 
<video> 元 素 与 <audio> 元 素 有 4 个 相同 的 布尔 型 属性 : autoplay 是 指 当 多 媒体 资源 准备 完 
成 后 立即 播放 ，controls 是 指 在 网 页 播放 器 上 显示 停止 /播放 等 控制 按钮 ，loop 表示 循环 播放 ; 
muted 的 字面 含义 也 很 清楚 ， 就 是 播放 时 静音 。 


2.2.7 HTML 5 标签 的 默认 规则 


格式 良好 (Well-formed) 是 XML 保证 文档 语法 有 效 性 的 一 项 基本 要 求 。 满 足 文档 “格式 良 
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好 ”的 其 中 一 个 要 求 是 ， 每 一 个 元 素 必须 有 成 对 出 现 的 开始 和 结束 标签 (或 者 使 用 简写 形式 )。 

XHTML 是 XML 的 一 种 应 用 ， 它 遵循 了 XML 的 形式 良好 要 求 。 传 统 的 HTML 不 必 遵 守 
这 个 规则 ，<br>、<hr>、<p> 等 HTML 标签 在 代码 编写 过 程 中 一 般 很 少 写成 <br >、<hr >, 或 
者 用 </p> 标 记 一 个 段落 的 结束 。HTML 5 文档 不 必 遵 循 “ 形 式 良好 ”的 要 求 ， 它 对 标签 的 缺 省 
进行 了 详细 的 语法 定义 。 网 站 开发 人 员 在 编写 代码 时 ， 需 要 保障 代码 结构 和 合适 的 清晰 ， 以 及 
良好 的 可 读 性 ， 没 有 必要 熟 记 这 些 特殊 的 标签 默认 规则 ， 只 需要 了 解 这 些 默认 规则 确实 存在 ， 
并 且 掌 握 HTML 5 语法 验证 方法 就 可 以 了 . 表 2.4 是 根据 WHAT 工作 组 制定 的 HTML 5 规范 ( 草 
稿 ) 对 常用 元 素 标签 使 用 规则 的 简要 概括 。 


表 2.4 HTML 5 常用 元 素 标签 的 使 用 和 默认 规则 


标签 的 使 用 和 默认 规则 标 签 

允许 单独 省 略 开始 或 者 结束 标签 ， A 

或 者 同时 缺 省 两 个 标签 的 元 素 

结束 标签 可 以 省 略 的 元 素 (每 个 元 
<dd>、<dt>、<li>、<p> 

素 分 别 有 额 外 的 附加 条 件 限制 ) 
<a>、<abbr>、<address>、<article>、<audio>、<b>、<blockquote>、 
<cite>、 <code>、 <data>、 <dfn>、 <div>、 <dl>、 <em>、 <footer>、 <form>、 

不 允许 标签 缺 省 的 元 素 <hl> ~ <h6>、 <header>、 <i>、<kbd>、<label>、<map>、<nav>、<ol>、 
<ul>、<samp>、<script>、<section>、<small>、<span>、<strong>、 
<style>、<sub>、<sup>、<time>、<title>、<u>、<video> 

结束 标签 必须 缺 省 的 元 素 <area>、<br>、<hr>、<img>、<input>、<link>、<meta>、<source> 


2.3 HTML SAPI 


HTML 5 API 的 范畴 包括 屏幕 组 件 拖 放 功能 (Drag and Drop)、Web 存储 、 地 理 位 置信 息 
(geolocation)、 服 务 器 端的 消息 发 送 、Web Worker( 一 种 出 于 性 能 优化 的 目的 ， 使 一 些 消耗 资源 
比较 多 JavaScript 程序 在 后 台 运行 的 机 制 )、 多 媒体 等 。HTML 5 API 与 JavaScript 关联 非常 紧 
密 , 它 既 包括 了 HTML 5 技术 规范 中 定义 的 交互 性 技术 , 也 包括 了 像 geolocation 这 样 从 严格 意 
义 上 来 讲 的 非 HTML 5 技术 。 这 里 介绍 其 中 两 种 常用 的 API。 


2.3.1 拖 放 功能 


HTML 5 能 够 不 依赖 于 CSS 中 的 动画 功能 实现 屏幕 对 象 的 拖 动 。 在 一 些 认证 考试 中 会 见 到 
如 图 2.18 所 示 的 用 拖 放 方式 完成 的 填空 题 。 
实现 网 页 上 对 象 的 拖 放 ， 需 要 完成 下 面 几 个 步骤 。 
(1) HTML 元 素 <div> 和 <img> 等 在 默认 方式 下 不 具有 被 拖 放 的 能 力 。 为 了 具备 这 种 能 
-个 HTML 元 素 必 须 被 标准 属性 draggable 标记 ， 即 draggable=“true”。 这 里 显示 的 draggable 
属性 值 为 tue, 需要 注意 , 这 个 属性 值 并 不 表示 draggable 是 一 个 布尔 型 属性 。 事实 上 , draggable 
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是 一 个 枚 举 型 属性 ， 它 有 3 个 有 效 的 属性 值 : true 代表 一 个 对 象 能 够 被 拖 动 ， 反 之 属性 值 false 
表示 一 个 对 象 不 能 被 拖 动 ， 而 auto 表示 能 否 拖 动 由 浏览 器 决定 。 


Drmsapi-dagldop x 
人 © | D localhost/CHO2/api 
2010 年 冬季 奥运 会 的 举办 地 点 是 ， 


2.18 用 拖 放 方式 完成 填空 


(2) 当 一 个 <div> 或 者 <img> 被 拖 动 时 ， 这 个 被 拖 动 的 元 素 应 该 使 用 ondragstart 属性 捕捉 
dragstart 事件 。ondragstart 的 属性 值 是 一 个 带 有 event 参数 的 事件 处 理 程序 。event 参数 用 于 在 
拖 放 事件 执行 过 程 中 传递 数据 。 

(3) 放置 被 拖 动 对 象 的 目标 区 域 有 两 种 处 理 选择 。 一 种 方法 是 使 用 dropzone 属性 标记 这 个 
目标 区 域 。dropzone 可 以 指定 目标 区 域 将 要 接受 字符 串 还 是 图 片 文 件 ， 另 一 种 方法 是 监听 
dragenter 和 dragover 事件 。 这 两 种 事件 分 别 用 于 准备 接受 对 象 移 入 目标 区 域 以 及 拖 放 完 成 时 如 
何 向 用 户 显示 。 我 们 将 在 后 面 的 实例 中 使 用 第 二 种 选择 。 

(4) 当 对 象 放 入 目标 区 域 时 ，drop 事件 被 触发 。HTML 的 元 素 和 数据 在 默认 情况 下 是 不 多 
许 放 入 另 一 个 元 素 的 。 为 了 实现 元 素 拖 放 ， 必 须 改 变 元 素 的 默认 行为 ，eventpreventDefault(O 
能 够 达到 这 样 的 目的 。 

(5) 数据 传递 应 该 在 “ 拖 ” 和 “ 放 ” 两 个 动作 发 生 时 进行 ， 可 以 传递 一 个 字符 串 或 者 是 文 
件 。 数 据 传递 通过 event 中 的 DataTransfer 对 象 完成 。DataTransfer 编程 接口 向 开发 人 员 提 供 了 
以 下 属性 和 方法 :dropEffect、effectAllowed、items( 一 个 数据 列表 )、setDragImage()、types[]、 
getData()、setData()、clearData()、filelist。 后 面 的 实例 将 使 用 setData0 和 getData() 方 法 传递 被 
拖 放 的 元 素 id。 

结合 以 上 描述 ， 我 们 可 以 得 到 代码 2.24。 这 段 代 码 中 的 CSS， 将 在 第 3 章 中 介绍 。 有 兴趣 
的 读者 可 以 参考 JavaScript 的 DOM 操作 API， 以 及 HTML 5 拖 放 API 中 更 多 的 功能 。 


代码 2.24 HTML 5 API 拖 放 功 能 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>HTML5 API - drag / drop</title> 
<style> 
.answer { 
width: 200px; 
height: 20px; 
background-color: #EEEEEE; 
} 
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</style> 
<script> 
function allowDrop (event) { 
event .preventDefault (); 
| 
function dragSstartHandler (event) 1{ 
event .dataTransfer.setData ("myAnswer", eVent .target.id) 7 
} 
function drop(event) { 
event .preventDefault (); 
Var data = event.dataTransfer.getData ("myAnswer"); 
event .target .innerHTML = ""; 
event .target .appendChild (document .getElementById (data)); 
} 
</script> 
</head> 


<body> 
2010 年 冬季 奥运 会 的 举办 地 点 是 : 
<div class="answer" ondrop="drop (event)" 
ondragover="allowDrop (event) "></div> 
<hr> 
<div id="answerl" ondragstart="dragStartHandler (event)" 
draggable="true" class="answer">A. 美国 盐湖 城 </div> 
<div id="answer2" ondragstart="dragStartHandler (event)" 
draggable="true" class="answer">B. 意大利 都 灵 </div> 
<div id="answer3" ondragstart="dragStartHandler (event)" 
draggable="true" class="answer">C. 加 拿 大 温哥华 </div> 
<div id="answer4" ondragstart="dragStartHandler (event)" 
draggable="true" class="answer">D. 俄罗斯 索 契 </div> 
</body> 
</html> 


2.3.2 地理 位 置信 息 


Geolocation( 地 理 位 置信 息 ) 是 一 种 非常 实用 的 技术 ， 它 可 以 帮助 网 站 用 户 快速 获得 自己 的 
地 理 位 置信 息 ， 包 括 经 度 、 纬 度 、 海 拔高 度 等 。 它 也 可 以 通过 连续 检测 ， 帮 助 在 移动 物体 中 的 
用 户 ， 获 得 当前 的 经 度 、 纬 度 和 海拔 高 度 信息 ， 以 及 当前 的 速度 与 运动 方向 信息 。 

由 于 并 不 是 所 有 的 浏览 器 都 支持 Geolocation, 在 使 用 这 种 技术 之 前 ,必须 首先 检测 浏览 器 
是 否 支 持 。 对 于 不 具有 功能 的 浏览 器 ， 应 该 对 用 户 提 示 恰 当 的 错误 信息 。 检 测 的 方法 是 判断 
navigator.geolocation 是 否 为 空 ， 现 在 的 主流 浏览 器 应 该 能 够 正确 返回 geolocation 对 象 。 

当 获 得 geolocation 对 象 后 ， 就 可 以 通过 geolocation 对 象 的 getCurrentPosition() 方 法 获得 当 
前 的 静态 地 理 位 置信 息 ， 或 者 通过 watchPosition() 方 法 获得 当前 运动 物体 的 动态 位 置信 息 。 在 
真正 使 用 这 些 API 之 前 ， 先 通过 表 2.5 来 认识 这 组 API 中 的 几 个 重要 对 象 。 
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表 2.5 ”Geolocation API 中 的 重要 数据 对 象 


对 象 属性 /方法 描 述 
latitude: double 纬度 
longitude: double 经 度 
altitude: double 海拔 高 度 
Coordinates 
( 举 标 ) accuracy: double 精度 
altitudeAccuracy: double 海拔 精度 
运动 方向 
速度 
coords: Coordinates 对 象 坐标 对 象 
Position DOM 时 间 戳 对象， 表现 为 一 个 长 整数 ， 
(位 置 ) timestamp: DOMTimeStamp 对 象 记录 从 1970 年 1 月 1 日 到 获得 Position 对 
象 之 间 的 时 间 间 隔 (毫秒 数 ) 
可 选项 。 表 示 要 求 获 得 更 高 的 精度 。 使 用 
时 会 影响 程序 响应 时 间 
ww 设置 尝试 获取 位 置信 息 的 最 
(ER 可 选项 。 单 位 为 毫秒 。 如 果 与 上 次 获取 
maximumAge: long Position 对 象 的 时 间 间 隔 小 于 此 属性 值 ， 
将 从 缓存 中 返回 位 置信 息 
错误 代码 ， 返 回 以 下 3 个 值 中 的 一 个 。 
了 PositionError code: short 和 
(错误 信息 ) 2: 位 置信 息 无 法 获得 
3: 连接 超时 


错误 信息 

Geolocation 接口 中 定义 了 如 下 3 个 方法 。 
@ ”getCurrentPosition(): 用 于 获取 静态 地 理 位 置信 息 。 
@ ”watchPosition(): 用 于 获取 移动 物体 的 位 置信 息 。 
eclearWatch0: 用 于 停止 获取 移动 物体 的 位 置信 息 。 
下 面 以 获取 静态 位 置信 息 为 例 ， 介 绍 Geolocation API 的 使 用 方法 。 
getCurrentPosition() 方 法 带 有 3 个 参数 。 这 个 方法 可 以 表述 为 : 
void getCurrentPosition( 

PositionCallback successCallback, 

optional PositionErrorCallback errorCallback, 

optional PositionOptions options); 
getCurentPosition0 的 第 2 和 第 3 个 参数 可 选 ,因此 这 个 方法 在 使 用 时 可 能 只 带 有 一 个 参数 ， 

也 可 能 带 有 两 个 或 者 3 个 参数 。 
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在 这 3 个 参数 中 , 第 3 个 参数 带 着 一 系列 配置 选项 (参考 表 2.5), 用 户 可 以 通过 这 个 选项 来 


预 设 连接 超时 的 毫秒 数 ， 或 者 要 求 获得 更 高 的 精度 等 。 


第 1 和 第 2 个 参数 都 是 回调 函数 。PositionCallback 回调 函数 带 有 一 个 Position 对 象 作为 参 


数 。PositionErrorCallback 回调 函数 带 有 一 个 PositionError 对 象 作 为 参数 。 


在 最 简单 的 情况 下 ， 只 需要 为 getCurrentPosition() 方 法 准备 第 一 个 回调 函数 就 可 以 了 。 若 


查询 当前 地 理 位 置信 息 的 过 程 顺利 完成 ，getCurrentPosition() 的 第 1 个 参数 中 的 回 


用 ， 这 个 回调 函数 本 身 带 有 一 个 Position 参数 ， 这 个 参数 带 有 被 检测 到 的 当前 地 理 位 置信 息 。 


程序 所 要 做 的 ， 就 是 读 出 并 处 理 Position 参数 中 的 坐标 、 时 间 戳 等 信息 。 
代码 2.25 演示 了 这 样 一 个 最 基本 的 调用 过 程 。 


代码 2.25 ”查询 静态 物体 的 地 理 位 置信 息 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>HTML5 API - geolocation</title> 
<script> 
function getLocation() { 
if (navigator.geolocation) { 


navigator.geolocation.getCurrentPosition(successCallback); 


} else { 
resultDiv.innerHTML = "无 法 使 用 Geolocation! "; 
} 
} 
function successCallback (position) { 
result = "经 度 : " + position.coords.longitude 
+ "<br> 纬 度 : " + position.coords.latitude 
+ "<br> 海 拔 : " + Position.coords .altitude 
+ "<br> 精 度 : " + Position.coords .accuracy 
+ "<br> 日 期 时 间 : " + position.timestamp; 
resultDiv.innerHTML = result; 
} 
</script> 
</head> 


<body> 
<button onclick="getLocation() "> 检测 当前 位 置 </button> 


<div id="myLocation">gnbsp;</div> 


<script> 


Var resultDiv = document .getElementById ("myLocation"); 


</script> 
</body> 


</html> 
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2.4 HTML 5 的 增强 功能 


2.4.1 定制 属性 data- 
在 某 些 时 候 ，HTML 5 的 元 素 需 要 按照 网 站 或 者 应 用 程序 的 需要 进行 进一步 归 类 。 例 如 ， 
-家 航空 公司 在 网 站 上 对 进 港 航班 按照 已 到 达 、 飞 行 中 、 延 误 、 取 消 等 不 同 的 状态 显示 成 不 同 
的 样式 ， 这 时 ， 可 以 分 别 为 不 同 的 状态 航班 设计 不 同 的 CSS 类 ， 然 后 再 把 这 些 类 赋予 相应 状 
态 的 航班 。 在 这 种 情况 下 ，CSS 类 起 到 了 对 元 素 分 类 的 作用 。 在 一 个 更 复杂 的 情况 下 ， 比 如 要 
设计 一 个 图 2.19 那样 的 能 够 重复 利用 的 、 平 时 隐藏 ， 需 要 的 时 候 能 从 屏幕 边缘 打开 的 菜单 ， 就 
不 是 一 个 CSS 类 能 够 解决 的 了 。 


e 
NR, Left Panel: Push 


Panels 


Left panel examp 


Panels 


人 


Left panel examples 


Overlay Reveal Push Overlay Re 


x Closepanel 


Right panel examples Right panel exarr 


Overlay Reveal Push Overlay Re 


图 2.19 右 图 中 深 色 部 分 常 被 用 作 隐 藏 式 的 导航 菜单 (来 源 : jQuery Mobile 网 站 ) 

设计 复杂 的 组 件 ， 尤 其 是 在 建立 一 个 新 的 JavaScript 框架 的 情况 下 ， 对 同一 元 素 在 功能 上 
的 分 类 就 显得 非常 重要 。 图 2.19 中 的 深 色 部 分 ， 在 jQuery Mobile 框架 中 被 称 为 panel。 对 于 这 
样 一 类 新 的 屏幕 元 素 ， 在 jQuery Mobile 中 用 data-role=“pane]” 标 注 。data-role 本 身 不 是 一 个 
HTML 5 中 的 属性 ,而 是 一 个 定制 属性 。 同样， 在 jQuery Mobile 框架 中 ,还 大 量 用 到 了 定制 属 
性 ， 包 括 data-mini、data-shadow、data-icon、data-theme 等 。 这 里 ，“data-” 前 级 是 这 些 定制 
属性 的 共同 特点 ， 因 此 ， 在 文档 中 通常 能 够 用 “data-*” 表 示 。 

为 了 保证 HTML 文档 的 语法 正确 HTML 5 中 的 定制 属性 除了 必须 使 用 “data-” 作 为 前 级 
外 ， 还 需要 满足 两 个 条 件 : 

@ 在 “data-” 前 级 的 后 面 至 少 带 有 一 个 字符 。 

@ 前缀 后 面 的 字符 不 可 以 出 现 ASCII 大 写字 符 。 

本 书 将 从 第 5 章 起 ， 逐 步 介 绍 HTML 5 定制 属性 在 jQuery Mobile 中 的 应 用 。 


2.4.2 Web 设计 的 无 障碍 化 与 WAI-ARIA 简 介 
网 站 设计 无 障碍 化 的 目的 ， 是 为 了 方便 残障 人 士 使 用 计算 机 。 在 网 页 设计 上 ， 应 该 充分 考 
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虑 有 视觉 障碍 、 听 觉 障 碍 、 行 动能 力 障 碍 人 士 的 需要 ， 为 他 们 尽 可 能 提供 额外 的 替代 方案 。 屏 
幕 阅读 就 是 这 其 中 一 个 典型 的 应 用 范例 。 知名 的 英文 屏幕 阅读 器 JAWS 便 是 一 个 具有 代表 性 的 
产品 。 

屏幕 阅读 器 在 阅读 网 页 时 ， 需 要 判断 网 页 内 容 在 上 下 文 环 境 中 的 关系 ， 例 如 ， 需 要 识别 按 
钮 上 的 文字 、 表 单 输入 框 上 的 标题 、 图 片 内 容 提示 、 联 系 地 址 、 表 头 、 页 头 、 页 尾 、 链 接 、 对 
话 框 、 数 据 表 格 、 列 表 、 菜 单 、 单 选 、 多 选 、 滚 动 条 、 滑 动 条 等 ， 阅 读 器 对 网 页 上 的 交互 式 内 
容 与 非 交互 式 内 容 (完全 用 于 显示 ) 的 处 理 方式 有 所 不 同 。 对 于 一 个 使 用 HTML 5 编写 代码 的 网 
页 ，HTML 5 中 的 元 素 注重 语义 ， 标 签 本 身 就 能 够 说 明 网 页 的 内 容 ， 因 此 ，HTML 5 本 身 就 对 
网 页 无 障碍 设计 提供 了 支持 .在 设计 和 编写 代码 的 实践 中 ,应 当 注 意 为 每 幅 图 片 添加 alt 属性 (这 
是 HTML 5 语法 要 求 必须 做 到 的 )， 并 且 赋 予 alt 属性 值 便 于 理解 的 文字 。 同 样 道理 ，HTML 标 
签 中 的 tile 和 label 属性 都 应 该 被 正确 赋值 。 

上 述 方法 能 够 帮助 屏幕 阅读 器 判断 网 页 内 容 , 以 使 阅读 器 能 够 正确 地 提示 用 户 屏幕 上 的 图 
片 、 列 表 、 菜 单 、 文 本 等 。 但 是 ， 如 果 遇 到 HTML 5 中 的 <header> 和 <footer> 等 元 素 ， 就 很 难 
判断 这 两 个 元 素 是 指 整个 网 页 的 头 尾部 分 、 还 是 指 网 页 上 由 <section> 或 者 <article> 构 成 的 一 个 
内 容 单元 的 头 尾部 分 。 另 外 ， 如 果 一 个 网 页 是 由 HITML 5 之 前 的 HTML 语法 编写 ， 由 于 缺乏 
标签 语义 ， 屏 幕 阅读 器 会 难以 判断 网 页 上 内 容 的 分 类 ， 影 响 阅读 效果 。 

WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 是 一 个 向 网 页 
阅读 器 提供 分 析 帮 助 的 工具 。 它 独立 于 HTML, HTML 5 对 WAI-ARIA 提供 了 支持 。 WAI-ARIA 
1.0 正式 技术 规范 于 2014 年 3 月 由 W3C 发 表 。 

WAI-ARIA 定义 了 一 系列 具有 层次 继承 关系 的 “角色 ”， 在 HTML 文档 中 通过 “role” 属 
性 表示 ; WAI-ARIA 定义 了 一 系列 状态 属性 ， 在 HTML 文档 中 通过 “aria-*” 系 列 属性 表示 。 
角色 (role) 用 于 描述 元 素 的 类 型 。 在 网 页 文档 中 ， 一 旦 一 个 元 素 被 role 属性 定义 为 某 一 种 角色 ， 
这 个 角色 定义 就 不 应 该 被 重新 定义 。 

表 2.6 中 的 角色 名 称 已 经 清楚 地 告诉 屏幕 阅读 器 当前 文字 或 者 屏幕 组 件 的 作用 ， 这 些 提 示 
信息 将 有 助 于 残障 人 士 通过 屏幕 阅读 器 了 解 屏幕 内 容 。 以 前 面 提 到 的 一 个 网 页 文档 上 有 多 组 
<header> 和 <footer> 元 素 为 例 ， 借 助 WAI-ARIA 的 地 标 角 色 ， 可 以 帮助 区 分 这 些 元 素 在 网 页 上 
的 作用 。 例 如 ， 一 个 作用 于 整个 网 页 的 <header> 元 素 可 以 用 role=“banner” 标 注 ， 一 个 作用 于 整 
个 网 页 的 <footer> 元 素 用 role=“contentinfo”* 标 注 。 
因此 ， 一 个 网 页 最 多 只 能 有 一 个 banner 角色 和 一 个 contentinfo 角色 。 而 当 <header> 和 
<footer> 元 素 在 <section> 等 元 素 中 使 用 时 ,应 该 分 别 用 role=“heading” 以 及 role=“complementary” 
标注 ， 一 个 网 页 可 以 有 多 个 heading 和 complementary 角色 。 

上 面 的 实例 解决 了 HTML 5 标签 含义 不 够 清晰 时 才 会 遇 到 的 问题 , 但 是 ， 如 果 一 个 网 页 使 
用 了 语义 相当 清晰 的 导航 元 素 <nav>， 再 用 WAI-ARIA 角色 描述 role=“navigation”， 就 会 造成 
重复 定义 ， 甚 至 定义 冲突 。 

为 了 解决 相关 的 问题 ，WALARIA 附加 了 3 条 在 HTML 文档 中 的 使 用 规则 (这 些 规则 由 
W3C 另行 制定 ， 不 属于 WAI-ARIA 技术 规范 的 一 部 分 ， 目 前 仍然 处 于 草稿 阶段 )。 这 3 条 规则 
可 以 简单 总 结 如 下 。 

@ ”规则 一 : 如 果 HTML 的 元 素 和 属性 已 经 能 够 清晰 地 表达 含义 ， 应 当 直 接 使 用 HTML 

的 元 素 和 属性 ， 而 不 要 使 用 WAI-ARIA 的 角色 和 状态 属性 。 
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@ 规则 二 : 
@ 规则 三 : 


除非 万 不 得 已 ， 不 要 改变 HIML 元 素 本 身 的 语义 。 
交互 式 控件 应 该 由 键盘 操作 来 完成 。 


表 2.6 WAI-ARIA 1.0 采用 的 角色 分 类 


角色 类 别 角色 描述 role 属性 值 
这 一 组 为 基础 角色 ， 用 于 构 yy 
加 command、 composite、 input、 landmark、 range、 
人 I roletype、 section、 sectionhead, select, structure、 
(Abstract Roles) 心 部 分 。 网 页 上 不 允许 直接 
widget、window 
使 用 这 一 组 角色 
屏幕 组 件 组 合 (容器 ): 
combobox、grid、listbox、menu、menubar、 
Tadiogroup、tablist、tree、treegrid 
屏幕 组 件 组 合 (容器 ) 中 的 单独 组 件 ; 
屏幕 组 件 角 色 这 一 组 角色 用 于 标注 屏幕 | alert、alertdialog、button、checkbox 、dialog、 
(Widget Roles) 组 件 (widgets) gridcell 、link 、log 、marquee 、menuitem 、 
menuitemcheckbox、menuitemradio、option、 
progressbar、 radio、 scrollbar, slider、 spinbutton、 
status、 tab、 tabpanel、 textbox、 timer、 tooltip、 
treeitem 
这 一 组 角色 用 于 描述 网 页 | article、columnheader、definition、directory、 
文档 结构 角色 上 的 组 织 结构 。 这 些 组 织 结 | document、 group、 heading、img、 list、 listitem、 


(Document Structure Roles) 


地 标 角 色 
Landmark Roles 


2.4.3 ”离线 访问 


构 通 常 是 指 网 页 上 的 非 交 


互 式 内 容 


这 一 组 角色 用 于 描述 网 页 
上 的 导航 地 标 


math 、 note 、 presentation 、Iegion 、IOW 、 
roWgroup、rowheader 、separator、toolbar 
application、banner、complementary、 


contentinfo 、form、main、navigation、search 


网 站 服务 需要 服务 器 的 在 线 支持 。 如 果 服 务 器 处 于 离线 状态 ， 客 户 端 浏 览 器 就 会 得 到 网 络 


访问 故障 等 错误 信息 。 


HTML 5 除了 可 以 用 于 开发 网 站 (包括 移动 网 站 ), 也 能 够 用 于 开发 混合 式 的 移动 应 用 程序 ， 
或 其 他 基于 HTML 5 技术 的 应 用 程序 。 在 这 样 的 背景 下 ， 网 页 的 离线 访问 就 是 一 个 非常 重要 的 


技术 环节 。 


HTML 5 支持 离线 访问 是 通过 浏览 器 的 缓冲 存储 实现 的 。 当 
网 页 被 浏览 器 加 载 时 ， 这 个 网 页 就 会 在 浏览 器 的 存储 空间 上 建立 一 个 副本 ， 当 下 次 访问 同样 的 
网 址 ， 而 服务 器 处 于 离线 状态 或 者 存在 网 络 接 入 故障 时 ， 这 个 副本 就 会 在 浏览 器 中 显示 ， 用 户 


-个 被 标记 为 允许 离线 浏览 的 


会 觉察 到 服务 器 离线 或 网 络 问题 。 这 对 于 内 容 更 新 不 太 频 繁 的 网 站 特别 适用 ， 而 需要 内 容 实 
时 更 新 的 网 页 则 不 应 该 使 用 这 种 技术 。 
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1. 配置 文件 


当 为 一 个 网 站 设计 离线 访问 时 ， 首 先 要 为 这 个 网 站 建立 一 个 manifest 配置 文件 ， 用 于 描述 
允许 或 者 不 允许 离线 访问 的 资源 。 这 个 配置 文件 所 在 网 站 中 的 位 置 并 不 重要 ， 只 要 用 于 离线 访 
问 的 网 页 文件 能 够 访问 到 这 个 配置 文件 即 可 。 配 置 文件 的 扩展 名 通常 使 用 appcache 或 者 
manifest， 扩 展 名 同样 也 不 重要 ， 重 要 的 是 服务 器 必须 以 MIME 类 型 text/cache-manifest 解析 配 
置 文件 。 如 果 Web 服务 器 不 能 正确 地 识别 HTML 5 离线 访问 配置 文件 ， 就 无 法 解析 配置 文件 
中 的 语法 。 这 时 ， 就 必须 参考 Web 服务 器 的 技术 手册 ， 添 加 对 配置 文件 扩展 名 的 支持 。 例 如 ， 
在 Apache 服务 器 中 ， 只 要 在 .htaccess 文件 中 添加 下 面 一 行 ， 配 置 文件 的 扩展 名 .appcache 就 能 
够 与 MIME 类 型 text/cache-manifest 建立 关联 : 


AddType text/cache-manifest .appcache 


2. 配置 文件 的 语法 


配置 文件 的 第 一 行 必须 是 : CACHE MANIFEST。 
在 配置 文件 的 第 一 行 以 后 ， 可 以 选择 配置 3 个 功能 单元 。 在 最 简单 的 情况 下 ， 配 置 文件 内 
不 定义 任何 功能 单元 。 这 样 ， 文 件 中 除了 第 一 行 以 外 ， 每 一 行 通过 相对 路 径 定义 一 个 网 络 资源 
(比如 网 页 在 服务 器 上 的 相对 路 径 )， 每 一 个 网 络 资源 都 会 在 浏览 器 的 缓存 中 建立 一 个 副本 。 
除了 直接 在 配置 文件 的 第 一 行 以 后 定义 每 个 需要 离线 访问 的 资源 外 , 还 可 以 通过 定义 3 个 
功能 单元 的 方式 ， 对 离线 访问 做 更 加 细致 的 配置 。 
@ CACHE: 在 CACHE 单元 中 ， 通 过 相对 路 径 列 出 每 一 个 需要 离线 访问 的 资源 。 
@ NETWORK: 在 NETWORK 单元 中 ， 通 过 相对 路 径 列 出 所 有 只 能 通过 网 络 才能 访问 
的 资源 。 路 径 描述 允许 使 用 “* ”等 通配符 来 匹配 多 个 网 络 资源 。 在 这 一 单元 中 列 出 
的 网 页 ， 即 使 存在 本 地 副本 ， 也 会 被 忽略 。 
@ FALLBACK: FALLBACK 单元 中 的 每 一 行 含有 两 个 相对 路 径 。 当 服务 器 处 于 离线 状 
态 ， 用 户 访问 第 一 个 相对 路 径 中 的 网 页 等 网 络 资源 时 ， 浏 览 器 将 返回 第 二 个 相对 路 径 
中 网 页 (或 者 其 他 网 络 资源 ) 的 副本 。 
代码 2.26 是 一 个 含有 3 个 功能 单元 的 配置 文件 的 实例 。 这 个 文件 通常 放 在 一 个 便于 网 站 所 
有 网 页 访问 的 路 径 中 ， 比 如 网 站 的 根 路 径 下 。 
代码 2.26 HTML 5 离线 访问 配置 文件 


CACHE MANIFEST 


CACHE: 
./CHO2/index.html 


NETWORK: 
-/CHO2/api *.html 


FALLBACK: 
/CHO2/basic.html ./offline-error.html 
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3. 可 以 被 离线 访问 的 网 页 


每 一 个 能 够 被 离线 访问 的 网 页 必须 在 <html> 元 素 中 用 manifest 属性 指向 网 站 的 离线 配置 文 
件 ， 如 代码 2.27 所 示 。 这 样 才能 使 离线 资源 生效 。 


代码 2.27 ”离线 网 页 


<!DOCTYPE html> 
<html manifest="/jqmexample.appcache"> 
<head> 
<meta charset="UTF-8"> 
<title> 离 线 网 页 </title> 
</head> 
<body> 
<p> 欢 迎 访问 本 网 页 ! 请 关闭 Web 服务 器 后 再 来 试 试 。</p> 
</body> 
</html> 
经 过 上 述 配 置 后 ， 网 站 中 需要 离线 访问 的 网 页 就 会 具有 让 浏览 器 使 用 网 页 本 地 副本 的 能 
力 。 在 网 络 下 次 接 通 以 后 ， 如 果 网 页 已 经 在 服务 器 上 有 了 更 新 ， 当 浏览 器 再 次 访问 该 网 页 时 ， 
本 地 副本 也 会 被 更 新 。 


2.5 _ HTML 5 代码 的 语法 验证 


本 章 介 绍 了 部 分 常见 的 HTML 5 元 素 的 常规 用 法 、HTML 5 中 元 素 的 嵌 套 关系 、 属 性 的 适 
用 条 件 、 标 签 默认 规则 、 即 将 废弃 的 元 素 和 属性 等 ， 还 有 大 量 繁杂 的 语法 细节 。 网 页 文档 中 语 
法 的 准确 性 ， 既 能 有 利于 降低 网 页 的 维护 工作 量 ， 也 能 提高 网 页 在 不 同 浏览 器 中 的 兼容 性 。 熟 
记 每 一 个 语法 细节 是 非常 困难 的 , 这 使 得 通过 手工 方式 对 HTML 5 网 页 进行 语法 纠 错 将 是 十 分 
困难 的 。 幸 好 W3C 为 我 们 提供 了 验证 HTML 5 语法 正确 性 的 在 线 工具 ， 能 够 帮助 我 们 非常 方 
便 地 验证 和 纠 错 HITML 5 网 页 文件 。 

W3C 的 HTML 语法 验证 工具 网 址 是 :validator.w3.org。 这 个 在 线 工 具 适 用 于 HTML 5 以 
及 早期 版 本 的 HTML 文件 。 它 通过 3 种 方式 接受 HTML 文档 。 

@ ”如 果 网 页 已 经 在 互联 网 上 ， 可 以 向 工具 网 站 提交 网 页 的 网 址 。 

@ ”直接 上 传 网 页 文件 。 

@ ”利用 拷贝 /粘贴 把 网 页 文本 内 容 直接 发 送 到 工具 网 站 。 

如 果 通 过 第 3 种 方法 提交 网 页 文件 ， 由 于 只 是 发 送 了 网 页 文本 的 内 容 ,工具 网 站 会 自动 地 
把 输入 的 数据 转换 成 UTF-8， 网 页 文件 的 实际 编码 方式 则 无 法 核对 。 

下 面 这 段 代码 含有 语法 错误 ， 通 过 W3C 的 在 线 验 证 很 容易 发 现 其 中 的 错误 : 

<html> 

<head> 


<meta charset="UTF-8" /> 
</head> 
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<body> 
<form method="post" action="#"> 

<fieldset> 
<legend> 产 品 反馈 </legend> 
<label for="model"> 产 品 型 号 </label> 
<input type="text" id="model™" 

Placeholder=" 请 输入 产品 型 号 . . ."><br> 
<label for="feedback"> 反 馈 </label> 
<textarea id="feedback" rows="5" cols="30" 
placeholder=" 请 输入 您 的 意见 和 建议 . - -"></textarea> 

</fieldset> 

<fieldset> 
<legend> 联 系 信息 </legend> 
<label for="customer"> 客 户 </label> 
<input type="text" id="customer" name="customer"><br> 
<label for="email"> 电 邮 </label> 
<input type="email" id="" name="email"><br> 

</fieldset> 

<input type="submit"” value=" 提 交 "> 

</form> 
</html> 


在 线 工 具 对 上 面 的 代码 提示 9 条 错误 信息 。 第 一 条 错误 是 缺少 DOCTYPE 声明 。 

DOCTYPE 用 于 通知 浏览 器 ， 说 明 当 前 HTML 文档 所 用 的 语法 版 本 ， 如 果 这 一 行 缺失 ， 验 
证 程序 就 无 法 判断 适用 的 语法 规则 ， 当 前 会 自动 应 用 HTML 4.01 Transitional 语法 。 这 显然 与 
文档 所 使 用 的 HTML 5 语法 不 符 ， 因 此 首先 需要 更 正 这 个 错误 。 

在 上 述 代 码 的 第 一 行 插入 <!DOCTYPE html> 后 , 重新 验证 这 段 代 码 , 在 线 工具 提示 3 条 错 
误 信息 。 第 一 条 错误 是 <head> 缺 少 必要 的 子 元素 ， 原 来 是 <title> 元 素 被 遗漏 了 。 在 将 来 jQuery 
Mobile 移动 网 站 开发 中 ，<head> 部 分 的 <title> 元 素 对 于 移动 设备 并 没有 什么 作用 ， 但 是 出 于 
HTML 5 的 语法 要 求 ， 这 个 元 素 不 能 被 省 略 。 第 二 条 和 第 三 条 错误 信息 是 相关 的 。 第 二 条 错误 
信息 提示 用 户 <input type=“email” id=“”name=“email”> 中 的 id 属性 值 不 可 为 空 。 由 于 此 处 id 属 
性 没有 被 赋值 , 这样 就 产生 了 第 三 条 错误 信息 ,<label for=“email> 电 邮 </label> 无 法 为 for 属性 
找到 匹配 的 id 属性 值 。 因 此 ， 只 要 再 为 <input type="“email” id=“”name=“email”> 中 的 id 属性 赋 
予 属性 值 “email”， 网 页 文件 的 语法 错误 就 全 部 改正 了 。 


2.6 本 章 习 题 


选择 题 (多 选 ) 

(1) 下 列 哪些 元 素 属于 HTML 中 的 块 级 (block) 元 素 ? ( 。 ) 
A. <div> B. <span> C. <hl> 
D. <p> E. <u> F. <b> 
G. <table> H. <td> I. <a> 
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(2) 下 列 哪些 元 素 属于 HTML 中 的 内 联 (inline) 元 素 ? (  ) 


A. <div> B. <span> C. <hl> 
D. <p> E. <ul> F. <b> 
G. <table> H. <td> I <a> 


(3) data-role 在 HTML 5 中 是 一 个 有 效 属性 . (  ) 
对 。 这 是 HTML 5 为 WAI-ARIA 预 留 的 属性 
对 。 这 是 HTML 5 为 jQuery 预 留 的 属性 
对 。 这 是 HTML 5 为 jQuery Mobile 预 留 的 属性 
对 。 在 HTML 5 中 ， 这 是 一 个 定制 属性 
错 。 这 个 属性 仅 存在 于 WHAT 版 本 的 HTML 5 规范 中 ， 还 没有 被 W3C 采用 
错 。 这 个 属性 在 HTML 5 规范 的 草稿 中 根本 不 存在 
(4) <address> 用 于 (  )。 
A.， 联系 人 的 地 址 B. 电子 邮件 地 址 C.， 任何 地 址 信息 
D. 网 站 维护 公司 的 地 址 E. 公司 网 址 
(5) <button> 元 素 在 不 借助 JavaScript 的 情况 下 可 以 用 作 发 送 按钮 。( ) 
A. 对 。<button> 在 任何 情况 下 都 能 起 到 发 送 按 钮 的 作用 
B. 对 。 仅 仅 在 表单 中 起 到 发 送 按钮 的 作用 
C. 错 。<button> 元 素 仅仅 显示 一 个 按钮 ， 没 有 任何 默认 动作 
(6) 定义 网 页 标题 的 <title> 元 素 应 该 包含 在 哪个 元 素 中 ?( ) 
A. <html> B. <meta> C. <head> D. <header> 
(7) 与 <script src=“js/mylInitialization.js”defer=“defer”></script> 作 用 相同 的 是 (。 )。 
A. <script src="]js/myInitialization.js” defer></script> 
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B. <script src=“js/myJInitialization.js”defer= ”></script> 


(8) 下 列 哪些 元 素 可 以 在 网 页 上 创建 超级 链接 ? ( ) 


A. <a> B. <map> C. <area> D. <usemap> 
(9) 下 列 哪些 是 HTML 5 中 合法 的 语言 代码 ? (  ) 
A. en B. eng C. english D. en-gb 


(10) 当 把 HTML 源 代码 文本 粘贴 并 且 发 送 到 W3C 在 线 HTML 验证 程序 中 后 , ( 。 )。 
A. 验证 程序 将 无 法 区 分 源 代码 的 HTML 版 本 
B. 验证 程序 将 无 法 区 分 HTML 或 者 XHTML 
C. 验证 程序 将 无 法 核对 源 文件 的 编码 方式 
D. 验证 网 站 的 CSS 验证 模块 失效 
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本 章 导读 : 


除了 HTML 以 外 ，CSS 是 网 站 开发 人 员 的 另 一 项 必 备 技术 。 与 第 2 章 一 样 ， 
作为 学 习 jQuery Mobile 的 预备 知识 ， 本 章 将 从 新 手 入 门 的 角度 ， 介 绍 CSS 的 语法 
特点 和 基本 用 法 ,并 在 此 过 程 中 逐步 介绍 CSS 3 的 特点 以 及 它 在 跨 设备 、 跨 浏览 器 
等 需要 符合 现代 设计 理念 等 方面 所 做 出 的 改进 。 在 本 书 的 后 续 章节 中 ,CSS 将 大 量 
用 于 jQuery Mobile 开发 与 定制 ， 包 括 CSS 3 中 动画 效果 在 移动 设备 上 的 使 用 等 。 

通过 本 章 的 学 习 , 读者 将 掌握 CSS 的 基本 设计 技巧 , CSS 3 与 HIML 5 相 辅 相 
成 的 关系 ，CSS 3 在 移动 网 站 设计 上 的 重要 作用 和 原理 。 

掌握 CSS 3 将 有 助 于 理解 jQuery Mobile 框架 本 身 的 设计 原理 以 及 在 应 用 开发 
中 的 各 种 定制 技巧 。 对 于 已 经 熟悉 CSS 3 样式 设计 的 读者 ， 建 议 快速 浏览 本章。 如 
果 读 者 希望 更 详细 地 了 解 CSS 3， 可 阅读 这 方面 的 专著 。 
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3.1 CSS 简 介 


3.1.1 _ CSS 规范 与 版 本 


CSS(Cascading Style Sheets, 层 合 式样 式 表 ) 是 一 种 样式 语言 , 它 能 够 作用 于 HTML、 XML， 
以 及 各 种 XML 的 应 用 ， 包 括 XHTML、SVG、XUL 等 。 在 网 站 开发 方面 ，CSS 提供 了 一 种 把 
样式 附加 到 HTML 文档 中 相应 元 素 的 方法 ,促进 了 网 页 中 的 数据 与 表现 风格 的 分 离 。 通 过 CSS， 
HTML 文档 中 富 含 语义 的 标签 就 有 了 生命 力 ， 能 够 把 网 站 设计 者 的 丰富 想象 力 展 现 出 来 。 

CSS 的 版 本 ， 更 应 该 被 称 为 级 别 (leveD)。 至 今 已 经 发 表 过 4 个 级 别 ( 含 草稿 和 部 分 发 表 的 版 
本 ) 的 CSS 技 术 规范 。Level 1 和 Level 2 为 已 经 定稿 并 发 布 的 正式 标准 。 前 者 发 表 于 1996 年 ， 它 
的 目的 是 提供 HTML 网 页 样式 。 后 者 始 于 1998 年 ", 着 眼 于 在 浏览 器 中 展现 HTML 和 XML 文 档 。 
CSS Level 2 建立 在 前 者 Level 1 之 上 , CSS Level 1 的 样式 在 CSS Level 2 中 仍然 有 效 。CSS Level 
1 和 Level 2 规范 已 经 不 再 维护 。 在 W3C 修 订 CSS 2 期 间 , CSS 2.1 也 已 于 2007 年 7 月 发 表 。CSS 
2.1 改正 了 CSS 2 中 的 一 些 错误 ， 并 删除 、 补 充 了 部 分 CSS 2 的 内 容 。 现 在 CSS 2 已 经 被 CSS 2.1 
取代 ， 最 新 的 CSS 2.1 规范 发 布 于 2011 年 6 月 。 

CSS 自 Level 3 起 ， 不 再 以 单一 文档 的 形式 发 布 ， 而 是 被 分 成 很 多 模块 ， 每 个 模块 单独 制 
定 规范 。 截 止 到 2014 年 6 月 ， 已 经 正式 成 为 技术 规范 的 有 色彩 、 选 择 器 、 名 称 空间 、 媒 体 查 
询 、 样 式 属性 等 模块 ， 接 近 完 成 的 模块 有 背景 和 边界 、 多 列 布局 等 ， 处 于 草稿 阶段 的 有 基本 用 
户 界 面 、2D 图 形变 换 、 过 渡 效 果 等 模块 。CSS 3 与 CSS 2.1 兼容 。CSS 3 相 比 较 于 前 两 个 版 本 
有 相当 大 的 提升 。2D 图 形变 换 是 其 中 一 个 重要 的 变化 ， 利 用 图 形变 换 ， 能 够 在 网 页 上 不 依赖 
于 Flash 或 者 其 他 动画 技术 实现 简单 的 动画 效果 。 媒 体 查询 是 CSS 3 中 另 一 个 重大 的 变化 。 虽 
然 媒体 查询 只 是 CSS 3 众多 模块 中 的 一 个 ， 但 是 ， 它 却 是 使 响应 式 Web 设计 和 渐进 增强 策略 
变 成 现实 的 基础 ， 而 这 两 种 策略 又 为 实现 跨 浏览 器 、 跨 硬件 平台 Web 设计 提供 了 理论 和 技术 
上 的 支持 。 

在 CSS 3 尚 处 于 开发 阶段 时 ，CSS Level 4 已 经 进入 了 前 期 设计 阶段 。CSS 4 与 CSS 3 一 样 
保持 了 多 模块 组 织 结构 ， 其 中 CSS 4 的 选择 器 模块 已 经 在 2013 年 发 布 了 第 二 版 草稿 。CSS 4 
将 在 CSS 3 的 基础 上 继续 扩展 新 的 功能 ， 包 括 预 加 载 和 服务 器 端的 样式 表 等 。 


3.1.2 ”定义 与 引用 样式 规则 


在 第 2 章 中 ，HTML 5 网 页 都 是 以 浏览 器 的 默认 方式 显示 。 大 多 数 HTML 5 标签 没有 精确 
的 表现 样式 要 求 ， 当 一 个 网 页 没有 引用 任何 样式 定义 时 ， 网 页 中 的 标签 将 以 浏览 器 对 这 些 标 签 
预定 义 的 默认 样式 表现 出 来 。CSS 通过 为 特定 的 HTML 单元 赋予 特定 的 样式 ， 使 HTML 网 页 
在 浏览 器 中 达到 预期 的 表现 要 求 。 样 式 规则 (CSS Rule SeD 包 含 一 系列 样式 声明 ,每 一 个 样式 声 


@ css 技术 规范 在 正式 发 布 后 , 又 发 表 了 若干 修订 版 本 。 比如 CSS 2 有 1998 年 5 月 的 版 本 和 2008 年 11 月 的 
版 本 。 这 些 修订 版 保持 了 Level 2 的 版 本 号 ， 有 别 于 发 表 于 2011 年 的 CSS 2.1。 


74 < 


第 3 章 CSS 3 设计 基础 


明 包括 一 个 样式 属性 和 对 这 个 样式 属性 赋予 的 属性 值 。 属 性 值 既 可 以 是 单一 值 ， 也 可 以 是 多 个 
属性 值 的 组 合 (常用 于 样式 声明 的 简化 形式 )。 两 个 样式 声明 之 间 用 分 号 “;:” 分 隔 。 代 码 3.1 是 
一 个 使 用 CSS 的 HIML 网 页 。 


代码 3.1 使 用 内 联 样式 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Css Basic</title> 
</head> 
<body> 
<p>P1</p> 
<p style="font-size:2em; height:3em; background-color:#EEEEEE;">p2</p> 
</body> 
</html> 


在 上 面 这 个 实例 中 ， 网 页 正文 包含 两 个 由 <p> 定 义 
的 段落 。 第 一 个 段落 没有 应 用 任何 样式 , 这 个 段落 在 济 
览 器 中 会 以 浏览 器 赋予 的 默认 样式 显示 。 第 二 个 段落 的 
<p> 标 签 被 直接 通过 style 属性 赋予 三 个 样式 声明 。 这 
三 个 样式 声明 中 的 样式 属性 分 别 代表 了 字体 大 小 、 段 落 
高 度 ， 以 及 背景 颜色 。 当 这 三 个 样式 声明 作用 在 <p> 标 
签 上 时 ， 这 个 段落 将 获得 由 CSS 样式 声明 所 规定 的 段 
落 高 度 和 段落 背景 色 , 而 字体 大 小 则 被 段落 中 的 文字 继 
承 ， 如 图 3.1 所 示 。 如 果 样 式 规则 通过 style 属性 直接 ”图 3.1 通过 内 联 的 CSS 把 样式 赋予 
作用 在 指定 的 HTML 元 素 单元 上 ， 这 样 的 样式 定义 被 特定 的 元 素 单元 
称 为 内 联 (inline) 样 式 。 

内 联 样式 只 能 作用 于 相应 的 HTML 标签 范围 内 。 样 式 也 可 以 定义 在 HTML 网 页 <head> 部 
分 的 <style> 元 素 中 ， 被 称 作 内 部 样式 。 由 于 内 部 样式 不 直接 定义 在 特定 的 HTML 标签 内 ， 在 
定义 样式 时 ， 必 须 使 用 选择 器 ， 明 确 该 样式 定义 的 作用 范围 。 代 码 3.2 是 一 个 使 用 内 部 样式 的 
实例 。 


代码 3.2 在 <style> 中 定义 内 部 样式 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Css Basic</title> 
<style> 
pi 
font-size: 2em; 
height: 5em; 
background-color: #EEEEEE; 


> 75 


中 jQuery Mobile 移 动 网 站 开发 


} 

</style> 
</head> 
<body> 

<p>pl</p> 

<p>p2</p> 
</body> 

</html> 


内 部 样式 定义 体现 了 样式 规则 语法 的 完整 使 用 方法 。 代 码 3.2 与 代码 3.1 有 相同 的 三 条 样 
式 声 明 ， 两 条 样式 声明 之 间 用 分 号 “;” 分 阳 。 所 有 的 样式 声明 都 放置 在 一 对 大 括号 中 。 在 大 
括号 之 前 ， 是 用 于 规定 该 样式 规则 作用 范围 的 选择 器 。 代 码 3.2 中 的 选择 器 是 p， 即 作用 于 所 


有 的 <p> 元 素 。 因 此 ， 这 条 规则 网 页 中 的 两 个 由 


<p> 标 签 定义 的 段落 都 适用 于 这 条 样式 规则 。 


CSS 的 样式 选择 器 有 比较 复杂 的 规则 ， 本 书 将 在 后 续 章 节 中 做 更 详细 的 介绍 。 

内 部 样式 使 样式 规则 定义 从 HIML 标签 中 独立 出 来 。 这 样 ，HTML 代码 结构 更 加 清晰 。 
从 维护 代码 的 角度 看 ， 后 期 样式 改动 无 需 直 接 修改 HIML 标签 中 的 属性 ， 降 低 了 代码 维护 工 
作 的 难度 。 外 部 样式 是 指 存在 于 HIML 文档 之 外 , 并 通过 <link> 元 素 链接 到 网 页 文档 中 的 CSS 。 
通过 外 部 样式 ， 能 够 进一步 降低 样式 规则 与 HTML 网 页 的 耦合 度 。 如 果 把 代码 3.2 中 的 CSS 
样式 定义 从 网 页 文件 中 分 离 ， 就 能 够 得 到 如 代码 3.3 和 3.4 这 样 的 结果 ， 这 两 个 文件 的 实际 显 


示 结 果 与 代码 3.2 的 结果 完全 一 致 。 
代码 3.3 ”通过 <link> 元 素 链接 外 部 样式 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>css Basic</title> 


<link rel="stylesheet" type="text/css" href="css/myStyle.css"> 


</head> 
<body> 
<p>pl</p> 
<p>p2</p> 
</body> 
</html> 


代码 3.4 一 个 简单 的 外 部 样式 文件 


下 
font-size: 2em; 
height: 5em; 
background-color: #EEEEEE; 


民 上 上 外 组 未 
ee 浏览 器 默认 样式 。 
@ ”内 联 样式 。 
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。 ”内 部 样式 。 

@ ”外 部 样式 。 

浏览 器 的 默认 样式 取决 于 浏览 器 厂商 ， 而 后 三 种 样式 可 以 由 网 站 开发 人 员 定 制 。 在 这 一 节 
的 介绍 中 ， 内 联 样式 、 内 部 样式 ， 以 及 外 部 样式 都 可 以 实现 相同 的 样式 定制 效果 ， 但 是 ， 在 实 
际 应 用 中 ， 样 式 规则 会 远 比 这 里 使 用 的 样 例 复杂 ， 某 一 个 特定 的 HTML 单元 可 能 会 同时 受到 
以 上 4 种 样式 引用 方式 的 影响 ， 甚 至 加 上 第 5 种 ， 通 过 JavaScript 动态 赋予 的 样式 。 在 这 种 情 
况 下 ,浏览 器 是 依据 样式 优先 级 来 选择 合适 的 样式 声明 。 样 式 优先 级 从 高 到 低 依 次 是 内 联 样 式 
表 、 内 部 样式 表 、 外 部 样式 表 、 浏 览 器 默认 样式 。 样 式 优先 级 跟 这 些 种 类 的 样式 定义 与 HTML 
文档 的 紧密 程度 有 关 。 


3.2 样式 选择 器 


在 代码 3.2 中 ， 我 们 看 到 了 一 个 非常 简单 的 选择 器 p， 它 能 够 匹配 HTML 文档 中 的 元 素 。 
样式 选择 器 的 作用 就 是 规定 样式 规则 在 HTML 文档 中 的 作用 范围 。 代码 3.2 中 的 样式 选择 器 只 
是 CSS 众多 选择 器 类 型 中 的 一 种 。 样 式 选择 的 基础 是 一 套 匹 配 规则 ， 通 过 这 些 匹 配 规则 ， 把 
样式 声明 应 用 到 特定 的 HTML 单元 中 。 这 一 节 将 重点 介绍 CSS 选择 器 的 各 种 用 法 。CSS 迄今 
各 个 版 本 的 选择 器 的 基本 用 法 也 被 用 于 jQuery 的 选择 器 中 。 熟 悉 CSS 选择 器 既是 设计 开发 桌 
面 浏览 器 网 站 的 基础 ， 也 是 学 习 和 开发 jQuery Mobile 的 一 个 重要 前 提 。 

有 关 各 种 样式 的 细节 ， 将 在 本 章 3.3 节 中 再 做 详细 介绍 ， 本 节 将 使 用 最 直观 的 一 些 样式 声 
明 ， 仅 用 于 演示 样式 选择 器 的 作用 范围 。 


3.2.1 简单 选择 器 


简单 选择 器 (Simple Selector) 包 括 了 元 素 选择 器 (类 型 选择 器 )、ID 选择 器 、 类 选择 器 、 属 性 
选择 器 、 伪 类 等 。 
1. 元 素 选 择 器 


元 素 选择 器 是 根据 元 素 名 进行 匹配 的 方案 。 如 果 没 有 额外 的 限制 条 件 ， HTML 文档 中 全 部 
与 元 素 选 择 器 中 的 元 素 名 称 相同 的 元 素 都 将 被 成 功 选择 。 代 码 3.5 中 的 网 页 由 一 系列 <div>、 
<span>， 以 及 藤 套 结构 组 成 。 在 HIML 文档 <head> 部 分 的 <style> 元 素 中 , 通过 div 和 span,， 直 
接 把 样式 赋予 文档 中 所 有 的 同名 元 素 。 


代码 3.5 ”通过 元 素 选择 器 把 样式 分 别 赋予 文档 中 所 有 的 <p> 和 <span> 元 素 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>CSS Selector - Type</title> 
<style> 
div { 
background-color:#EEEEEE; 
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下 
span { 
background-color:#AAAAAA; 
} 
</style> 
</head> 
<body> 
<div>div 1</div> 
<div> 
div 2 
<span>div 2 - span 1</span> 
</div> 
<div> 
<span>div 3 - span 1</span>g&nbsp;é&nbsp; 
<span>div 3 - span 2</span> 
</div> 
</body> 
</html> 


如 图 3.2 所 示 ， 所 有 的 div 和 span 元 素 被 分 别 设置 成 不 同 的 背景 色 。 


DD css Selector - Type 
© | D localhost/CHO3/selector_type.html 


3.2 ”元素 选择 器 作用 于 所 有 的 同名 元 素 


2. ID 选 择 器 
ID 类 型 是 HTML 标记 语言 中 的 一 个 标准 属性 。 在 HTML 5 中 ,同一 个 id 属性 值 在 一 个 特 


定 的 文档 中 仅 能 出 现 一 次 。 以 元 素 的 id 属性 作为 匹配 条 件 ， 在 定义 样式 规则 时 ， 选 择 符 必须 
以 “#” 为 前 缀 。 代码 3.6 中 的 #div3 对 应 了 以 div3 为 标识 的 元 素 。 由 于 id 属性 值 在 一 个 HTML 
文档 中 是 唯一 的 ，ID 选择 器 只 能 作用 于 指定 的 元 素 单元 。 这 里 所 说 的 元 素 单 元 ， 不 是 一 个 正 
式 的 术语 ， 而 是 指 一 个 元 素 及 其 子 元 素 。 如 果 通 过 ID 选择 器 定义 的 样式 中 含有 能 够 被 继承 的 
样式 ， 这 些 样式 就 可 以 作用 于 由 id 属性 指定 的 元 素 及 其 子 元 素 中 。 
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代码 3.6 通过 ID 选择 器 把 样式 赋予 唯一 的 一 个 元 素 单元 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Css Selector - ID</title> 
<style> 
#div3 { 
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background-color:#CCCCCC; 
} 
</style> 
</head> 
<body> 
<div id="divl">div 1</div> 
<div id="div2"> 
<span>div 2 - span 1</span> 
</div> 
<div id="div3"> 
<span>div 3 - span 1</span>gnbsp; gnbsp; 
<span>div 3 - span 2</span> 
</div> 
</body> 
</html> 


如 图 3.3 所 示 ，id 值 为 div3 的 div 元 素 被 成 功 地 添加 了 背景 色 ， 同 时 ， 该 样式 也 被 炭 套 在 
该 div 元 素 中 的 span 元 素 继承 。 


] C55 Selector - ID 


人 © 口 localhostCHO3/selector_jidhtml 


dv 1 
div2- span 1 
dv3-spanl div3-span2 


图 3.3 ID 选择 器 作用 于 指定 的 元 素 及 其 子 元 素 


3. CSS 类 选择 器 

在 一 个 或 者 多 个 HTML 文档 中 ， 当 需要 同时 为 多 个 元 素 单元 赋予 相同 的 样式 时 ， 应 该 把 
这 些 具 有 相同 样式 特征 的 元 素 单 元 归 为 一 类 ， 并 在 HTML 文档 中 的 标签 中 用 标准 属性 class 标 
识 。 在 定义 样式 规则 时 ， 通 过 前 级 “.” 代 表 一 个 CSS 类 选择 器 。 由 类 选择 器 定义 的 样式 将 与 
HTML 文档 中 所 有 具有 相同 class 属性 值 的 元 素 单元 相 匹 配 。 

代码 3.7 中 使 用 了 CSS 类 选择 器 .darkBackground。 


代码 3.7 ”通过 类 选择 器 把 样式 赋予 具有 相同 class 属 性 值 的 元 素 单元 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>CSS Selector - class</title> 
<style> 
.darkBackground { 
background-color:#CCCCCC; 
} 
</style> 
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</head> 
<body> 
<div id="divl">div 1</div> 
<div id="div2" class="darkBackground"> 
<span>div 2 - span 1</span> 
</div> 
<div id="div3"> 
<span>div 3 - span 1</span>gnbsp;é&nbsp; 
<span class="darkBackground">div 3 - span 2</span> 
</div> 
</body> 
</html> 


因此 , HTML 文档 中 的 元 素 , 不 论 是 div 还 是 span, 只 要 拥有 class 属性 值 darkBackground， 
就 同时 获得 了 类 选择 器 .darkBackground 定义 的 样式 ， 如 图 3.4 所 示 。 


丫 C55 selector - dass 


4- @ | DB localhost/CHO3/selector_class.html 


div 1 
div2-span1l 
dv3-spanl diy3- span2 


3.4 ”类 选择 器 使 具有 相同 class 属 性 值 的 元 素 单元 获得 相同 的 样式 


4. 属性 选择 器 


CSS 3 中 的 属性 选择 器 ， 用 于 匹配 文档 中 元 素 的 属性 和 属性 值 。 通 过 属性 选择 器 中 的 表达 
式 ， 并 根据 元 素 标签 中 的 属性 与 属性 值 来 决定 所 赋予 的 样式 。 

属性 选择 器 能 够 起 到 使 greetings=“Happy New Year” 和 greetings=“Happy Birthday”* 设 置 成 
不 同样 式 的 作用 。 读者 或 者 已 经 注意 到 这 里 的 属性 greetings 在 HTML 5 中 并 不 存在 。 由 于 CSS 
是 一 种 可 以 广泛 应 用 于 HTML、XML 以 及 XML 的 各 种 应 用 的 样式 语言 ， 因 此 ，CSS 的 选择 
器 的 适用 范围 并 不 仅仅 局 限于 HIML， 对 于 XML 同样 有 效 ， 属 性 greetings 可 以 看 作 XML 文 
档 中 的 一 个 属性 。 

属性 选择 器 在 方 括号 [] 中 声明 。 例 如 ，div[data-role=page] 表 示 选 择 所 有 的 <div> 元 素 ， 并 且 
要 求 被 选择 的 <div> 元 素 都 拥有 data-role 属性 ， 属 性 值 为 page。 这 只 是 属性 选择 器 的 一 种 用 法 。 
CSS 3 把 属性 选择 器 的 使 用 方法 分 为 4 种 不 同 的 情况 ， 其 中 与 名 称 空间 相关 的 使 用 方法 和 与 
DTD 相关 的 使 用 方法 超出 了 本 书 的 范围 。 

下 面 介绍 与 后 续 章 节 直 接 相 关 的 两 类 属性 选择 器 。 

(1) 属性 与 属性 值 匹配 

这 一 类 型 的 属性 选择 器 来 源 于 CSS 2， 用 于 判断 一 个 标签 是 否 含有 特定 的 属性 ， 并 且 通 过 
表达 式 实 现 属 性 值 的 匹配 ， 详 见 表 3.1 中 的 描述 。 
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表 3.1 属性 选择 器 - 选择 属性 名 与 属性 值 


选择 器 * 用 法 说 明 
[at 选择 拥有 属性 att 的 元 素 ， 不 论 属 性 值 是 什么 
[att-val] ”| 选择 拥有 属性 att 并 且 属性 值 是 val 的 元 素 
anval] | 思 择 角 有 属性 的 元 素 ， 如 果 届 性 信 是 以 空格 分 只 的 多 个 单词 ， 其 中 一 个 单词 必须 是 val, 
如 果 val 是 一 个 空 字符 串 ， 则 这 个 选择 符 不 会 选择 任何 元 素 
选择 拥有 属性 att 的 元 素 , 其 属性 值 或 者 是 val, 或 者 是 以 val 开始 的 字符 品 。 需 要 注意 的 是 ， 
[atl=vall ”| 这 个 属性 选择 表达 式 的 本 意 并 不 是 用 于 匹配 子 字符 串 ， 而 是 用 于 匹配 语言 dang) 或 者 相关 属 


性 中 经 常会 出 现在 语言 代码 中 的 “-” 字 符 
* 表 中 的 att 泛 指 属性 名 ，val 泛 指 属性 值 。 


代码 3.8 中 有 5 个 <div> 元 素 ， 其 中 4 个 拥有 属性 data-hello， 这 4 个 <div> 元 素 满足 属性 选 
择 器 div[data-hello] 的 要 求 ,因此 这 4 个 <div> 元 素 中 的 文字 都 被 设置 为 红色 ; div[data-hello=hello] 
只 能 选择 data-hello 属性 的 值 为 hello 的 <div> 元 素 。 


代码 3.8 ”属性 名 与 属性 值 匹配 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Css Selector - attribute</title> 
<style> 
div[data-hello] { 
color: red; 
} 
div[data-hello=hello] { 
font-weight: bolder; 
} 
div[data-hello~=hello] { 
font-style: italic; 
} 
div[qata-hello|= 你 好 ] { 
text-decoration: underline; 
} 
</style> 
</head> 
<body> 
<div data-greetings="hello">Greetings</div> 
<div data-hello="greetings"> 你 好 hello</div> 
<div data-hello="hello">Hello</div> 
<div data-hello=" 你 好 "> 你 好 </div> 
<div data-hello="hello 你 好 "> 你 好 hello</div> 
</body> 
</html> 
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代码 3.8 中 只 有 第 3 个 <div> 满 足 条 件 ,其 中 的 文字 被 设置 为 粗 体 ; 属性 选择 器 div[data-hello 
~ 一 hello] 能 够 匹配 data-hello 属性 的 值 为 hello, 或 者 其 中 一 个 单词 为 hello 的 <div> 元 素 , 第 3 和 
第 5 个 元 素 都 能 满足 条 件 ， 其 中 的 文字 被 设置 为 斜体 ;选择 器 div[data-hellol= 你 好 ] 能 够 匹配 
data-role 属性 值 以 “你 好 ”开始 的 <div> 元 素 ， 第 4 个 <div> 元 素 满足 条 件 ， 其 中 的 文字 被 加 上 
了 了 下划线 。 代 码 3.8 在 浏览 器 中 的 显示 效果 如 图 3.5 所 示 。 
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您 好 
你 好 helilo 


图 3.5 ”通过 属性 名 和 属性 值 分 别 为 <div> 元 素 设置 不 同 的 样式 
(2) 匹配 属性 值 中 的 子 字符 串 
在 上 一 组 源 于 CSS 2 的 属性 选择 器 基础 上 ，CSS 3 增加 了 3 个 属性 选择 器 ， 用 于 匹配 属性 
值 中 的 子 字 符 串 。 
表 3.2 是 对 这 一 组 属性 选择 器 的 描述 。 


表 3.2 属性 选择 器 - 匹配 属性 值 中 的 子 字符 串 


选 择 器 * 用 法 说 明 

i 选择 拥有 属性 att 的 元 素 , 属性 值 必须 以 val 开始 。 如果 val 是 一 个 空 字符 串 ， 则 这 个 选择 符 
不 会 选择 任何 元 素 

全 选择 拥有 属性 att 的 元 素 ， 属 性 值 必须 以 val 结尾 。 如 果 val 是 一 个 空 字符 串 ， 则 这 个 选择 符 
不 会 选择 任何 元 素 

[atteval] 选择 拥有 属性 att 的 元 素 ， 属 性 值 至 少 含有 一 个 子 字符 串 val。 如 果 val 是 一 个 空 字符 串 ， 则 


这 个 选择 符 不 会 选择 任何 元 素 
* 表 中 的 att 泛 指 属性 名 ，val 泛 指 属性 值 。 


在 代码 3.9 中 , 选择 器 div[data-hello^=hello] 能 够 选择 所 有 data-hello 属性 值 以 hello 开头 的 
<div> 元 素 ， 代 码 中 的 第 一 和 第 三 个 <div> 被 选择 ， 并 且 其 中 的 文字 被 设置 为 粗 体 ; 选择 器 
div[data-hello$=hello] 能 够 选择 所 有 data-hello 属性 值 以 hello 结尾 的 <div> 元 素 ， 代 码 中 的 第 一 
和 第 二 个 <div> 被 选择 ， 并 且 其 中 的 文字 被 设置 为 斜体 ;选择 器 div[data-hello*=hello] 能 够 选择 
所 有 data-hello 属性 值 中 含有 hello 的 <div> 元 素 ， 全 部 4 个 <div> 都 满足 条 件 ， 其 中 的 文字 被 添 
加 了 下 划 线 。 


代码 3.9 ”属性 值 部 分 匹配 


<!DOCTYPE html> 


<html> 
<head> 


82 < 


第 3 章 CSS 3 设计 基础 


<meta charset="UTF-8"> 
<title>CSS Selector - attribute</title> 
<style> 
div[data-hello^=hello] { 
font-weight: bolder; 
} 
div[data-hello$=hello] { 
font-style: italic; 
} 
div[data-hello*=hello] { 
text-decoration: underline; 
} 
</style> 
</head> 


<body> 
<div data-hello="hello">hello</div> 
<div data-hello="my hello">Hello</div> 
<div data-hello="hello greeting">Hello</div> 
<div data-hello="my hello greeting">Hello</div> 
</body> 
</html> 


代码 3.9 在 浏览 器 中 的 显示 效果 如 图 3.6 所 示 。 


3.2.2 伪 类 


首先 需要 明确 ， 伪 类 (Pseudo-classes) 是 属于 简单 选择 
器 的 范畴 。 由 于 伪 类 种 类 比较 繁杂 ， 本 书 特意 单独 设立 了 
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的 内 容 、 状 态 ， 以 及 行为 特征 等 ， 把 无 
法 适用 树 状元 素 结构 , 也 无 法 用 其 他 简单 选择 器 表达 的 特 
征 归 为 一 系列 特殊 的 类 别 。 伪 类 不 需要 在 HTML 标签 中 
显 式 引用 。 在 为 伪 类 定义 样式 时 ， 以 冒号 “:” 开 始 ， 后 
接 伪 类 名 。 如 果 需 要 ， 一 些 伪 类 在 括号 中 带 有 参数 。 

伪 类 分 为 以 下 几 个 大 的 类 别 : 动态 伪 类 (Dynamic Pseudo-classes)、 目 标 伪 类 (Target 
Pseudo-classes)、 语 言 伪 类 (Language Pseudo-classes)、 用 户 界 面 元 素 伪 类 (UI Element States 
Pseudo-classes)、 结 构 伪 类 (Structural Pseudo-classes)。 下 面 简 要 介绍 其 中 一 些 将 在 本 书后 续 章 节 
中 使 用 的 伪 类 。 


1. 动态 伪 类 
动态 伪 类 又 可 再 细 分 为 链接 伪 类 (Linking Pseudo-classes) 和 用 户 动作 伪 类 (User Action 


Pseudo-classes) 两 个 子 类 别 。 
动态 伪 类 共有 若干 种 情况 ， 如 表 3.3 所 示 。 


3.6 ”属性 值 部 分 匹配 为 <div> 
元 素 设置 不 同 的 样式 
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表 3.3 几 种 动态 伪 类 及 其 用 法 


适用 于 还 没有 访问 过 的 链接 


和 visited ”| 适用 于 用 户 已 经 访问 过 的 链接 
适用 于 鼠标 等 悬 停 于 一 个 元 素 上 方 或 从 一 个 元 素 上 方 经 过 时 
用 户 动作 伪 类 适用 于 用 户 按 下 并 释放 一 个 按钮 或 其 他 屏幕 元 素 时 


适用 于 一 个 
代码 3.10 使 用 了 以 上 几 种 动态 伪 类 。 
代码 3.10 ”使 用 动态 伪 类 


<!DOCTYPE html> 
<html> 
<head> 

<meta charset="UTF-8"> 

<title>Selector - Dynamic pseudo-classes</title> 

<style> 

aslink 
text-decoration: none; 


E 在 输入 的 表单 字段 ， 该 字段 通过 键盘 或 者 鼠标 获得 输入 焦点 时 


color: LawnGreen; 
} 
a:visited { 
text-decoration: none; 
color: Brown; 
} 
input:hover { 
background-color: Moccasin; 
} 
input:focus { 
background-color: Olive; 
} 
button:active { 
background-color: FireBrick; 
1 
</style> 
</head> 
<body> 
<a href="http://www.yahoo.com">Yahoo!</a><br> 
<a href="http://hotmail.com">Hotmail</a><br> 
<input type="text"><br> 
<input type="text"><br> 
<button> 按 钮 1</button><br> 
<button> 按 钮 2</button><br> 
</body> 
</html> 
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代码 中 的 屏幕 元 素 共 分 3 组 ， 以 做 比较 。 第 一 组 为 两 个 链接 。 在 网 页 上 ， 通 常情 况 下 ， 链 
接 的 默认 显示 方式 是 蓝 色 ， 外 加 下 划 线 。 而 代码 3.10 中 的 两 个 链接 已 经 通过 :link 和 :visited 去 
除 链 接 文字 上 的 修饰 ， 因 此 ， 无 论 在 什么 时 候 ， 都 不 会 显示 下 划 线 。 当 用 户 尚 未 访问 时 (或 者 
访问 历史 已 经 从 浏览 器 删除 后 )， 链 接 文字 显示 为 草绿 色 ， 而 当 用 户 访问 以 后 ， 链 接 文 字 显 示 
为 棕色 。 这 段 代 码 中 的 两 个 表单 输入 字段 用 于 比较 :hover 和 :active 在 <input> 上 的 作用 ， 当 鼠标 
虑 浮 于 任意 一 个 字段 上 时 ， 该 字段 将 被 自动 应 用 由 :hover 定义 的 样式 ， 背 景色 变 为 浅 桶 黄色， 
当 和 鼠标 按 下 以 后 ， 直 到 另 一 个 元 素 被 键盘 按键 事件 或 者 鼠标 按钮 事件 触发 之 前 ,表单 输 入 字段 

- 直 处 于 聚焦 状态 ， 自 动 应 用 由 :focus 定义 的 样式 ， 背 景色 变 为 橄榄 绿 。 屏 幕 上 的 两 个 按钮 用 
于 演示 :active。:active 样式 仅 适 用 于 鼠标 按钮 或 者 键盘 按 下 , 直到 按钮 或 者 键盘 按键 释放 之 前 。 
2. 结构 伪 类 


结构 伪 类 能 够 根据 元 素 在 树 状 文档 结构 中 的 关系 等 额外 信息 进行 选择 。 当 计算 一 个 元 素 在 
文档 结构 中 的 位 置 时 ， 文 本 (字符 串 ) 等 非 元 素 类 节点 将 不 被 计算 在 内 。 元 素 位 置 索 引 以 1 为 起 
点 。 表 3.4 列举 了 部 分 结构 伪 类 及 其 用 法 说 明 。 


表 3.4 部 分 结构 伪 类 及 其 用 法 


伪 类 用 法 说 明 

:root 代表 文档 的 根 元 素 。 在 HTML 4 中 ， 根 元 素 固定 为 <html> 

用 于 在 树 状 文档 结构 中 匹配 一 些 系列 节点 (元 素 )。 能 够 成 功 匹 配 的 节点 必须 拥有 父 节 
点 ， 并 且 括 号 中 的 参数 符合 以 下 三 种 形式 之 一 : @ 指 定 被 选择 的 节点 必须 是 父 节点 的 
:nth-child() 第 mn 个 子 节点 ， 其 中 的 n 值 是 一 个 非 零 正 整数 ，@odd( 奇 数 ) 或 者 even( 偶 数 )，@ 采 用 
an+b 格式 。 其 中 a 表示 倍数 ，n 代表 一 个 从 0 开始 计算 的 计数 器 ，b 代表 偏 移 量 ， 可 
以 是 正 整数 、0 或 者 负 整数 

作用 与 :nth-child0 人 擅 类 相反 ,代表 倒数 某 个 或 者 按照 一 定 循环 顺序 的 一 系列 节点 。 参 数 


lastchild0 | 形式 及 含义 与 -nth_child0 伪 类 相同 

:first-child 与 :nth-child(1) 相 同 ， 表 示 第 一 个 子 节点 

:last-child 与 :nth-last-child(1) 相 同 ， 表 示 倒 数 第 一 个 子 节点 
:only-child 当 一 个 元 素 是 其 父 元 素 的 唯一 子 元 素 时 才能 成 功 匹 配 
:empty 与 不 含 任何 子 元 素 节点 或 者 文本 节点 的 元 素 匹配 


代码 3.11 中 的 网 页 使 用 了 一 个 简化 的 电影 院 座位 图 来 演示 表 3.4 中 所 有 的 伪 类 以 及 各 种 使 
用 方法 。 


代码 3.11 使 用 结构 伪 类 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Selector - Structural pseudo-classes</title> 
<style> 
SEC 人 ET 


background-color: MintCream; 
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<td>10</td><td>8</td><td>6</td><td>4</td><td>2</td> 
<td>1</td><td>3</td><td>5</td><td>7</td><td>9</td> 

二 人 ET 

<tr> 
<td>10</td><td>8</td><td>6</td><td>4</td><td>2</td> 
<td>1</td><td>3</td><td>5</td><td>7</td><td>9</td> 

</tr> 

<tr> 
<td>10</td><td>8</td><td>6</td><td>4</td><td>2</td> 
<td>1</td><td>3</td><td>5</td><td>7</td><td>9</td> 

</tr> 

<tr> 
<td colspan="10"> 走 廊 </td> 

</tr> 

<tr> 
<td>10</td><td>8</td><td>6</td><td>4</td><td>2</td> 
<td>1</td><td>3</td><td>5</td><td>7</td><td>9</td> 

</tr> 

<trE> 
<td>10</td><td>8</td><td>6</td><td>4</td><td>2</td> 
<td>1</td><td>3</td><td>5</td><td>7</td><td>9</td> 

</tr> 

<tr> 
<td>10</td><td>8</td><td>6</td><td>4</td><td>2</td> 
<td>1</td><td>3</td><td>5</td><td>7</td><td>9</td> 

</tr> 

<tr> 
<td colspan="10"></td> 

</tr> 

</table> 
</body> 
</html> 


在 研究 这 段 代码 的 过 程 中 需要 注意 ， 背 景色 属性 background-color 可 以 被 重复 应 用 到 多 个 
元 素 ， 在 这 种 情况 下 ， 按 照样 式 加 载 顺序 ， 最 后 被 加 载 的 样式 将 覆盖 原先 的 样式 。 

首先 ， 代 码 3.11 中 的 :root 为 整个 网 页 添加 了 一 层 非 常 浅 的 背景 色 。 

其 次 ， 通 过 tr:nth-child(odd) 和 tr:nth-child(even) 分 别 为 单数 行 和 双 数 行 设 置 不 同 的 背景 色 。 
代码 中 的 td:nth-child(1) 和 td:nth-last-child(1) 分 别 为 每 一 行 中 第 一 个 和 最 后 一 个 <td> 元 素 设 置 背 
景色 。 在 紧 随 其 后 的 代码 中 ，td:first-child 和 td:last-child 已 经 被 加 上 注释 ， 和 暂时 不 起 作用 。 由 
于 这 两 个 伪 类 与 在 此 之 前 的 两 个 伪 类 作用 相同 ， 读 者 可 以 取消 在 代码 中 的 注释 ， 并 在 浏览 器 中 
验证 匹配 效果 是 否 完全 一 致 。td:only-child 能 够 在 网 页 中 成 功 匹 配 文档 中 的 两 个 <td> 元 素 。 这 
两 个 <td> 元 素 都 是 其 父 节点 <tr> 的 唯一 子 元 素 ， 背 景色 被 设置 为 浅 绿色 ， 不 过 ， 后 一 个 被 成 功 
匹配 的 元 素 又 被 :empty 成 功 匹 配 ， 并 把 棕色 设置 为 背景 色 。:empty 的 匹配 条 件 是 一 个 元 素 不 含 
有 其 他 元 素 ， 所 以 网 页 文档 中 的 <td colspan=“10”></td> 满 足 :empty 的 匹配 条 件 ， 如 果 在 这 个 
<div> 元 素 中 插入 一 些 空格 字符 , 则 认为 <div> 元 素 中 含有 文本 节点 (虽然 文本 节点 不 属于 标记 语 
言 中 的 元 素 )， 这 样 :empty 的 匹配 条 件 不 能 满足 ， 加 入 空格 后 的 <div> 元 素 将 被 应 用 由 
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td:only-child 伪 类 所 指定 的 样式 。td:nth-child(5) 用 于 匹配 每 一 行 中 第 5 个 <td> 元 素 ， 并 设置 背景 
色 为 绿色 。td:nth-child(6n+0) 使 用 了 循环 加 上 偏 移 量 的 格式 ，6n+0 的 计算 方法 是 在 每 一 行 中 (每 

-个 <tr> 元 素 中 )， 依 次 用 n=0, 1, 2, 3, .来 计算 6n+0 的 值 ， 可 以 得 到 这 样 一 个 数列 : 0，6，12， 
18，...。 由 于 每 一 行 仅 有 10 个 <td> 元 素 ， 而 且 起 始 序号 为 1， 因 此 每 一 行 中 只 有 序号 为 6( 第 6 
个 <td> 元 素 ) 的 元 素 被 成 功 匹 配 。 代 码 3.11 的 显示 效果 如 图 3.7 所 示 。 


Selector - Structural pseudo-” 头 


GD local CHO3/selector_pseudo_class_structual ,html ¢3| © 


个 


ls 
ll: 
|: 


colollo 
Eg ES ES 
www 
wwlw 
-~ 


3.7 ”通过 结构 伪 类 对 网 页 元 素 标签 按照 位 置 关系 设置 不 同 的 样式 


3.2.3” 伪 元 素 


伪 元 素 (Pseudo-element) 提 供 了 一 种 文档 语言 无 法 直接 表述 的 抽象 概念 ， 比 如 第 一 行 、 第 一 
个 字符 ， 以 及 前 后 位 置 关系 等 。 伪 元 素 在 使 用 时 通过 连续 两 个 冒号 “::” 标 识 ， 后 接 伪 元 素 名 。 
连续 的 两 个 冒号 能 够 帮助 区 分 伪 元 素 和 伪 类 。CSS 3 目前 保留 了 一 个 选择 器 中 只 能 出 现 一 个 伪 
元 素 的 限制 ， 但 是 ，CSS 工作 组 已 经 计划 在 将 来 的 CSS 版 本 中 增加 在 一 个 选择 器 中 使 用 多 个 
伪 元 素 的 功能 。 表 3.5 列举 了 CSS 3 中 4 个 伪 元 素 的 含义 。 


表 3.5 CSS 3 中 的 伪 元 素 


选择 指定 元 素 中 多 行文 字 中 的 第 一 行 。 如 果 一 个 元 素 中 的 文字 内 容 以 格式 标签 <br> 开 
始 ， 真 正 的 文字 内 容 出 现在 格式 标签 <br> 之 后 ， 这 些 文字 也 不 被 认为 是 第 一 行文 字 


:first-line 


::first-letter | 选择 指定 元 素 标签 中 所 含 文字 的 第 一 个 字母 


::before 和 ::after 继承 自 CSS 2.1， 在 指定 元 素 的 前 面 (或 后 面 ) 插 入 内 容 


代码 3.12 对 文档 中 的 每 一 个 段落 <p> 使 用 了 首 字符 伪 类 ::first-letter。 
代码 3.12 ” 首 字符 伪 元 素 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
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<title>Selector - pseudo elements</title> 
<style> 
Dtirst=letter id 
font-size: x-large; 
} 
</style> 
</head> 


<body> 

<div> 马 本， 路 德 * 金 -- I have a dream (节选 )</div> 

<div>... </div> 

<p>Five score years ago, a great American, in whose symbolic 
shadow we stand today, signed the Emancipation Proclamation. 
This momentous decree came as a great beacon light of hope 
to millions of Negro slaves who had been seared in the 
flames of withering injustice. It came as a joyous daybreak 
to end the long night of their captivity. </p> 

<p>But one hundred years later, the Negro still is not free. 
One hundred years later, the life of the Negro is still 
sadly crippled by the manacles of segregation and the 
chains of discrimination. One hundred years later, the Negro 
lives on a lonely island of poverty in the midst of a vast 
ocean of material prosperity. One hundred years later, the 
Negro is still languished in the corners of American society 
and finds himself an exile in his own land. And so we've 
come here today to dramatize a shameful condition.</p> 

<div>... </div> 

</body> 


</html> 


它 能 够 使 每 一 个 段落 的 第 一 个 字符 以 大 字体 输出 ， 如 图 3.8 所 示 。 


[DD Selector - pseudodemen x 和 


€ © | D localhost/CHO3/selector_pseudo_elementhtml 


马丁 路 德 - 金 -- Thave a dream (节选 ) 


Five score years ago, a great American in whose symbolic shadow we stand today, signed the Emancipation 
Proclamation. This momentous decree came as a great beacon light of hope to milions of Negro slaves who had 
been seared in the flames of withering injustice. It came as a joyous daybreak to end the long night of their captivity 


But one hundred years later the Negro stil is not free One hundred years later the ie of the Negro is stil sadly 
crippled by the manacles of segregation and the chains of discrimination. One hundred years later, the Negro lives 
on a lonely island of poverty in the midst of a vast ocean of material prosperity. One hundred years later the Negro 
is stil languished in the comers of American society and finds himself an exile in his own land And so we've come 
here today to dramatize a shameful condition 


3.8 首 字符 伪 类 与 段落 中 首 个 字符 的 匹配 
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3.2.4 选择 器 组 合 与 组 合 选择 器 


1. 选择 器 组 合 


本 书 第 5 章 将 介绍 jQuery Mobile 网 页 的 基本 结构 ， 我 们 将 会 看 到 在 一 个 典型 的 jQuery 
Mobile 网 页 页 头 中 ， 网 页 的 标题 被 放置 在 h1~h6 的 任何 一 个 标签 内 。 与 平常 所 见 的 网 页 不 同 ， 
在 默认 的 jQuery Mobile 网 页 的 页 头 部 分 (data-role=“header”), 不 论 是 hl, 还 是 h6， 其 拥有 的 样 
式 风格 是 一 致 的 。 根 据 在 此 之 前 的 介绍 ， 通 过 元 素 (类 型 ) 选 择 器 ， 可 以 分 别 为 hl1~h6 的 6 个 元 
素 标 签单 独 定义 相同 的 样式 风格 。 很 显然 ， 虽 然 这 样 的 方法 可 行 ， 但 是 却 显 得 十 分 笨拙 ， 而 且 
由 于 存在 大 量 的 元 余 代码 ， 降 低 了 代码 的 可 维护 性 。 在 这 种 情况 下 ， 使 用 选择 器 组 合 就 是 一 个 
合理 的 选择 。 

选择 器 组 合 ， 就 是 把 具有 相同 样式 风格 的 选择 器 集合 成 一 组 ， 定 义 在 一 行 ， 选 择 器 之 间 以 
逗号 “,” 分 隔 。 在 选择 器 组 合 定义 之 下 的 样式 声明 适用 于 整个 组 合 。 下 面 ， 我 们 用 代码 3.13 
来 演示 一 个 简单 的 选择 器 组 合 。 这 段 代 码 能 够 使 hl1~h6 这 6 个 元 素 的 显示 风格 保持 一 致 。 

代码 3.13 ”通过 选择 器 组 合 简化 多 个 具有 相同 样式 声明 的 CSS 选 择 器 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>CSS Selector - grouping</title> 
<style> 
hl, D2 Lh3, ha. bh5y BG 
font-weight: 300; 
font-size: 1.2em; 
padding-top: 3px; 
padding-bottom: 3px; 
margin: 0; 


} 

</style> 

</head> 

<body> 
<hl>hl</hl> 
<h2>h2</h2> 
<h3>h3</h3> 
<h4>h4</h4> 
<h5>h5</h5> 
<h6>h6</h6> 

</body> 

</html> 


选择 器 组 合 可 以 看 作 是 具有 相同 样式 声明 的 多 个 选择 器 的 简写 形式 。 简 化 以 后 的 选择 器 组 
合 功能 与 简化 之 前 单独 定义 的 样式 表 完 全 一 致 。 但 是 ， 使 用 选择 器 组 合 要 求 所 有 参与 的 选择 器 
必须 是 语法 有 效 的 ， 否 则 ， 只 要 其 中 有 任何 一 个 选择 器 使 用 了 错误 的 语法 ， 整 个 选择 器 组 合 就 
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会 失效 。 
2. 组 合 选择 器 - 选择 后 代 元 素 


HTML 文档 中 的 元 素 可 以 像 XML 那样 构建 一 个 DOM 树 状 结构 。 

在 DOM 树 状 结构 中 ， 元 素 之 间 的 包含 关系 可 以 被 看 作 是 节点 之 间 的 层次 关系 。 这 样 ， 
HTML 文档 中 的 元 素 之 间 的 包含 关系 , 就 可 以 被 理解 为 元 素 节点 在 一 个 层次 结构 中 的 前 后 代 关 
系 。 外 层 元 素 为 其 所 包含 元 素 的 前 代 元 素 ( 父 节点 和 祖先 节点 )， 被 包含 的 元 素 就 是 其 外 层 元 素 
的 后 代 元 素 ( 包 括 子 节点 和 和 孙 节点 )。 

CSS 提供 了 利用 组 合 选择 器 ， 通 过 元 素 之 间 的 层次 关系 进行 选择 的 方法 。 代 码 3.14 演示 
了 三 种 与 元 素 层 次 关系 相关 的 组 合 选择 器 的 用 法 。 


代码 3.14 “与 元 素 前 后 代 层 次 关系 相关 的 组 合 选择 器 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Css Selector - Combinator - Descendant combinator</title> 
<style> 
div P 1{ 
font-size: x-large; 
} 
div > pt 
font-style: italic; 
} 
dv pi 
text-decoration: underline; 
} 
</style> 
</head> 
<body> 
<p>p 1</p> 
<div> 
<p>p 2</p> 
</div> 
<div> 
<section> 
<p>p 3</p> 
</section> 
</div> 
</body> 
</html> 


在 这 段 代 码 中 ， 第 一 个 组 合 选择 器 divp 含有 两 个 元 素 div 和 op 的 组 合 ， 中 间 用 空格 分 隔 。 
空格 是 两 个 简单 选择 器 的 连接 符 。 这 个 组 合 选择 器 表示 选择 <div> 元 素 的 所 有 <p> 后 代 元 素 。 第 
二 个 组 合 选择 器 div > p 通过 连接 符 “>” 表 示 选 择 <div> 元 素 的 所 有 直接 子 元 素 <p>( 不 包含 孙 
元 素 以 及 其 他 后 代 元 素 )。 第 三 个 组 合 选择 器 div * p 通过 连接 符 “*” 表 示 选 择 <div> 元 素 的 非 
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直接 后 代 元 素 <p>( 即 不 包括 直接 子 元 素 )。 
以 上 三 组 组 合 选择 器 ,分 别 把 被 选择 的 元 素 中 的 文字 样式 设置 为 大 字体 、 和 斜体 和 带 下 划 线 


的 文字 。 图 3.9 直观 地 演示 了 上 述 组 合 选择 器 的 实际 选择 结果 。 


图 3.9 利用 组 合 选择 器 ， 按 照 元 素 
层次 关系 赋予 不 同 的 样式 


3. 组 合 选择 器 - 选择 同 级 元 素 

CSS 组 合 选择 器 除了 选择 后 代 元 素 外 , 还 可 以 选择 同 级 元 素 。 同 级 元 素 拥有 相同 的 父 元 素 ， 
在 组 合 选 择 器 中 通过 波浪 线 连接 符 “~” 或 者 加 号 连接 符 “+” 实 现 不 同 的 选择 逻辑 。 代 码 3.15 
演示 了 这 两 种 组 合 选择 器 的 使 用 方法 。 

代码 3.15 与 同 级 元 素 相关 的 组 合 选择 器 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>CSS Selector - Combinator - Sibling</title> 
<style> 
Po iw 
font-size: x-large; 
} 
p+div { 
font-style: italic; 
| 
Plid=p2] + div { 
text-decoration: underline; 
. 
</style> 
</head> 
<body> 
<p id="pl">P 1</p> 
<div>Div 1</div> 
<div>Div 2</div> 
<div>Div 3</div> 
<p id="p2">P 2</p> 
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<div>Div 4</div> 
<div>Div 5</div> 
<div>Div 6</div> 
</body> 
</html> 
上 述 代 码 中 出 现 了 三 个 组 合 选择 器 ， 分 别 把 被 选择 的 元 素 的 样式 设置 为 大 字体 、 斜 体 和 带 
下 划 线 的 文字 。 
第 一 个 选择 器 使 用 了 波浪 线 连 接 符 ， 表 示 选 择 所 有 出 现在 <p> 元 素 以 后 的 <div> 元 素 。 
第 二 个 选择 器 使 用 了 加 号 连接 符 ， 表 示 选 择 紧 跟 在 所 有 <p> 元 素 后 面 的 (一 个 )<div> 元 素 。 
第 三 个 选择 器 比较 特殊 ， 它 在 组 合 连接 符 中 混合 了 属性 选择 器 。 使 用 属性 选择 器 ， 可 以 在 
组 合 选择 器 中 ， 对 被 选择 的 条 件 设置 额外 的 限定 条 件 。 这 个 组 合 选择 器 选择 id 值 为 p2 的 <p> 
元 素 后 紧 跟 的 <div> 元 素 。 组 合 选择 器 的 使 用 方法 比较 灵活 ， 除 了 通过 属性 选择 器 ， 实 现 对 被 
选择 的 元 素 更 加 精确 地 定位 ， 还 可 以 通过 多 个 连接 符 ， 在 复杂 的 层次 结构 或 者 同 级 元 素 中 ， 实 
现 更 加 复杂 的 选择 逻辑 。 
代码 3.15 的 实际 运行 结果 如 图 3.10 所 示 。 


图 3.10 利用 组 合 选择 器 ， 按 照 元 素 与 其 他 同 级 元 素 的 位 置 关 系 ， 设 置 不 同 的 样式 


3.3 基本 样式 


3.3.1 ”Box 模 型 


1. Box 模 型 与 矩形 嵌 套 结构 
-个 HTML 元 素 和 它 所 包含 的 内 容 ， 不 论 是 一 个 简单 的 字符 串 、 一 个 图 片 ， 或 者 是 一 个 
文章 段落 ， 在 浏览 器 中 都 会 被 显示 在 一 个 矩形 的 区 域 中 。 这 个 矩形 区 域 又 被 嵌 套 在 三 个 矩形 方 
框 中 , 它们 把 实际 显示 的 内 容 以 及 周边 区 域 从 里 向 外 分 为 内 容 区 、 内 框 (padding)、 边框 (border)、 
和 外 框 (margin)。 内 容 区 的 大 小 由 width 和 height 属性 确定 。 
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以 上 和 托 形 蔡 套 结构 可 以 通过 图 3.11 加 以 说 明 。 


3 CSS Selector - Combinatc x 


< 和 © 口 localhosyCHO3/boxModeLhtml 


内 容 区 


Q Eements| Network Sources Timeline Profiles Resources Audits Console 汪 阁 器,* 
Styles| Computed Event Listeners “= 


3.11 基本 Box 模 型 


图 3.11 为 通过 Chrome 浏览 器 内 置 的 开发 工具 (可 以 通过 快捷 键 F12 打开 ) 观 察 代码 3.16 中 
的 <div> 元 素 在 浏览 器 中 的 表现 方式 及 其 详细 数据 。 开 发 工具 由 三 部 分 组 成 ， 上 方 为 浏览 器 的 
主 窗 口 ， 显 示 了 当前 的 网 页 。 当 我 们 点 击 浏览 器 中 间 的 菜单 上 的 Elements 选项 后 , 浏览 器 的 左 
下 角 就 会 显示 网 页 的 源 代 码 。 当 我 们 在 源 代码 上 单 击 任意 一 个 元 素 时 ,这 个 元 素 的 Box 模型 就 
会 出 现在 浏览 器 窗口 的 右 下 角 的 Styles 标签 页 (或 称 “ 选 项 卡 ”) 中 。 

代码 3.16 的 <body> 部 分 仅 有 一 个 <div> 元 素 。 网 页 上 的 样式 表 对 <div> 元 素 设置 的 width 和 
height 属性 仅 作用 于 <div> 的 内 容 ， 在 图 3.11 的 右 下 角 中 以 蓝 色 表示 ， 并 在 蓝 色 区 域 中 标示 了 
该 区 域 的 大 小 。 在 蓝 色 区 域 的 外 围 ， 围 绕 着 灰 绿 、 橙 黄 和 浅 红色 和 矩形 框 。 这 三 种 颜色 分 别 表示 
该 <div> 的 内 框 (padding)、 边 界 (border) 和 外 框 (margin)。 每 个 区 域 都 标示 了 相应 样式 的 参数 值 。 


代码 3.16 基本 Box 模 型 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Css Selector - Combinator - Sibling</title> 


<style> 
div { 
margin: 15px7 
padding: l10px; 


border-style: solid; 
border-width: Spx; 
border-color: grey; 
height: SOpx; 

width: 200px; 
background-color:  #DDDDDD 
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</style> 
</head> 
<body> 
<div> 内 容 区 </div> 
</body> 
</html> 
Box 模型 除了 上 面 提 及 的 嵌 套 矩形 结构 外 ， 还 包括 了 网 页 内 容 的 显示 与 隐藏 、 滚 屏 、 屏 幕 
元 素 定位 ， 以 及 对 矩形 显示 区 域 大 小 变化 与 限制 等 。 Box 模型 的 理论 包括 基本 Box 模型 和 弹性 
Box 模型 。 下 面 将 分 别 介 绍 Box 模型 中 的 几 组 属性 。 


2. width 和 height( 宽 度 与 高 度 ) 


-个 元 素 内 容 的 宽度 和 高 度 分 别 用 属性 width 和 height 表示 。 属 性 width 和 height 用 于 设 
置 一 个 元 素 的 内 容 区 域 ， 不 包括 一 个 元 素 的 内 框 、 边 界 和 外 框 。 在 使 用 属性 width 和 height 的 
同时 , 还 可 设置 min-width( 最 小 宽度 )、max-width( 最 大 宽度 )、min-height( 最 小 高 度 )、max-height 
(最 大 高 度 ) 等 属性 。 当 上 述 4 个 属性 与 width 和 height 不 一 致 时 ， 将 优先 采用 上 述 4 个 属性 。 
样式 属性 width 和 height 在 默认 情况 下 由 浏览 器 自动 计算 并 设 定 一 个 值 ， 也 能 够 从 其 父 元 
素 继承 。 当 为 一 个 元 素 设 定 width 和 height 属性 的 具体 参数 时 ， 可 以 使 用 百分比 ， 并 以 包含 当 
前 元 素 的 块 级 元 素 (参看 2.2.4 小 节 中 有 关 块 级 元 素 和 内 联 元 素 的 描述 ) 的 width 或 者 height 为 参 
照 。 也 可 以 使 用 cm( 厘 米 )、in( 英 寸 )、pt( 相 当 于 1/72 英寸 )、pc( 相 当 于 12pt)、px( 屏 幕 上 的 像 
素 点 )、em( 当 前 的 字符 大 小 ) 作 为 单位 。 


3. padding 和 margin( 边 距 ) 


padding 和 margin 分 别 代 表 了 一 个 元 素 在 Box 模型 中 的 内 框 和 外 框 。 一 个 矩形 区 域 有 4 条 
边 ，CSS 允许 为 内 框 或 者 外 框 的 每 一 条 边 单独 设置 。 例 如 ，margin-top、margin-right、 
margin-bottom、margin-left， 通 过 后 级 来 表达 对 具体 的 某 一 条 边 进行 设置 。padding 也 能 够 通过 
同样 的 4 个 后 组 实现 相应 的 功能 。 

padding 和 margin 属性 是 上 述 4 个 带 有 后 级 属性 的 简写 形式 。 当 这 两 个 属性 的 属性 值 仅 有 
一 个 值 时 ， 表示 内 框 或 者 外 框 的 每 一 条 边 都 具有 相同 的 宽度 ， 当 带 有 两 个 值 时 ， 第 一 个 值 代表 
上 边 和 下 边 ， 第 二 个 属性 值 代表 左边 和 右边 ， 当 带 有 3 个 值 时 ， 这 3 个 值 分 别 代 表 上 、 右 、 下 
边 ， 而 当 带 有 4 个 属性 值 时 ， 这 3 个 值 分 别 代 表 上 、 右 、 下 、 左 边 。 


4. border( 边 框 ) 


在 默认 情况 下 ， 一 个 元 素 的 边框 宽度 为 0， 即 边框 不 可 见 。 

当 一 个 元 素 需要 显示 边框 时 , 它 的 border-style 属性 必须 被 设置 为 除了 none 和 hidden 以 外 
的 可 见 类 型 ， 如 表 3.6 所 示 。 

在 设置 了 border-style 属性 ， 使 边框 变 为 可 见 以 后 ,还 可 以 通过 border-width 属性 设置 边框 
的 宽度 ， 通 过 border-color 属性 设置 边框 的 颜色 。CSS 同样 有 各 种 单独 为 4 条 边框 中 的 某 一 条 
单独 设置 样式 的 属性 。 
border 属性 能 够 作为 简写 方式 集成 多 个 属性 的 功能 ， 这 些 属 性 的 用 法 非常 简单 和 直观 ， 这 
里 不 再 歼 述 。 
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发 
表 3.6 边框 的 样式 
描 

none { hidden 边框 宽度 为 0 
CococcoccoCOC] 
2 dotted 。 点 线 边 框 
Noooeeeeeeeeeed 
一 一 一 一 
Le 下 a 虚线 边框 
| Inset 立体 内 医 边 杠 

Outset | 立体 突出 边框 


双 实 线 。 边 框 宽度 等 于 两 条 实 线 以 及 中 间 空 隙 宽度 的 总 和 


5. display 与 visibility( 显 示 样 式 与 可 见 性 ) 


属性 display 用 于 指定 一 个 元 素 的 显示 方式 , 它 拥有 众多 属性 值 。 表 3.7 列举 了 部 分 常见 的 
属性 值 。 


表 3.7 display 属 性 的 常见 属性 值 
用 法 说 明 


一 个 元 素 显示 为 如 <span> 那 样 的 内 联 方 式 


把 
block 把 一 个 元 素 显示 为 如 <div> 或 者 <p> 那 样 的 “ 块 级 ”元 素 方式 
使 


组 


table 一 个 元 素 拥 有 类 似 <table> 那 样 的 表现 方式 
flex 使 一 个 元 素 成 为 “ 块 级 ”弹性 (flex) 容 器 
inherit 从 父 元 素 继承 本 属性 

none 完全 不 显示 一 个 元 素 


对 于 一 个 “ 块 级 ”元 素 ， 例 如 <div>， 我 们 可 以 通过 设置 display 属性 值 为 block 或 者 none 
来 显示 或 者 隐藏 该 元 素 。 


属性 visibility 通过 属性 值 hidden( 隐 藏 ) 和 visible( 可 见 ) 设 置 
属性 在 功能 上 相似 。 代 码 3.17 演示 了 这 两 组 属性 的 不 同 作用 。 理 解 这 种 差别 ， 对 于 Web 和 


移动 Web 开发 都 非常 
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要 。 


-个 屏幕 元 素 是 否 显示 。 这 两 
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代码 3.17 ”两 种 用 于 显示 /隐藏 的 方法 比较 


<!DOCTYPE html> 


<html> 
<head> 

<meta charset="UTF-8"> 

<title>Show- Hide</title> 

<style> 

div { 

border-style: solid; 
border-width: 1px; 


width: 100px; 
height: 30px; 
text-align: center; 
} 
</style> 
</head> 
<body> 


<div id="divl">Div 1</div> 
<div id="div2">Div 2</div> 
<div id="div3">Div 3</div> 
<div id="div4">Div 4</div> 
<hr> 


CSS 3 设计 脏 础 


<button onclick="div2Hidden()">Div 2 - visibility:hidden</button><br> 


<button onclic 
<button onclick= 


div2Visible()">Div 2 - visibility:visible</button><hr> 
div3None () ">Div 3 - display:none</button><br> 


<button onclick="div3Block()">Div 3 - display:block</button> 


<script> 
Var eleDiv2 = document .getElementById ("div2"); 
Var eleDiv3 = document .getElementById ("div3"); 
function div2Hidden() { 
eleDiv2.style.visibility = "hidden"7 
1 
function div2Visible() { 
eleDiv2.style.visibility = "visible"; 
} 
function div3None() { 
eleDiv3.style.display = "none"; 
} 
function div3Block() { 
eleDiv3.style.display = "block"; 
} 
</script> 
</body> 
</html> 


代码 3.17 中 ， 有 4 个 垂直 排列 的 <div> 元 素 和 两 组 用 于 动态 控制 显示 与 隐藏 的 按钮 。 这 两 
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组 按钮 分 别 使 用 了 visibility 和 display 属性 。 

如 图 3.12 所 示 ， 每 个 按钮 上 都 标明 了 将 在 哪 一 个 <div> 元 素 上 改变 属性 值 。 当 按钮 被 按 下 
以 后 , 相应 按钮 上 的 动作 由 click 事件 触发 ，onclick 属性 用 于 引用 与 按钮 相关 的 事件 处 理 程序 。 
这 段 代码 同时 也 是 通过 JavaScript 程序 动态 改变 元 素 样式 属性 的 实例 。 


x 


Div3 


Div4 


| Div 2 -visibility-hidden | 
| Div 2 - visibilityvisible 


Dv 3- displaynone |、 


[Dv3- dsplay.ock 


[Dv 2 -visibilty.hidden 
[Div 2 - visibilityvisible | 


Du 2 -wifibiity hidden 


Di 2 - visibilty visible 


[Dv3- display.none | 
Div 3 - display-block 


| Div 3 - display.none 
Dv 3 - display-block, 


图 3.12 使 用 两 种 不 同 的 隐藏 方式 


图 3.12 中 的 3 个 截屏 分 别 代表 了 代码 3.17 在 浏览 器 中 的 初始 状态 、div2 被 隐藏 和 div3 被 
隐藏 时 的 画面 。 

从 这 3 幅 截 屏 中 很 清楚 地 看 到 ， 当 一 个 元 素 的 visibility 属性 被 设置 为 hidden 时 ， 该 元 素 
被 隐藏 。 该 元 素 在 原先 所 在 的 位 置 被 保留 ， 因 此 在 图 中 能 够 看 到 div2 的 位 置 出 现 了 空白 。 而 
当 一 个 元 素 的 display 属性 被 设置 为 none 时 ， 该 元 素 仿佛 不 存在 ， 在 图 3.12 中 可 以 看 到 div4 
位 置 上 移 的 情况 。 

6. position( 定 位 ) 


HTML 代码 在 结构 上 具有 层次 关系 。 这 种 层次 关系 转换 到 浏览 器 中 ， 就 变 成 了 屏幕 元 素 之 
间 的 包含 关系 ， 也 就 是 父 元 素 是 子 元 素 的 容器 ， 子 元 素 定位 在 父 元 素 中 。 这 样 的 关系 其 实在 视 
觉 效 果 上 并 不 是 绝对 的 。 一 个 元 素 在 屏幕 上 的 定位 首先 取决 于 position 属性 ， 然 后 再 通过 top、 
bottom、left、right 等 属性 具体 确定 显示 位 置 。 

表 3.8 列举 了 position 属性 的 4 种 主要 定位 方式 。 


表 3.8 通过 position 实 现 的 4 种 定位 方式 


默认 值 。 元 素 按照 其 在 HIML 文档 中 的 顺序 显示 
以 该 元 素 本 应 所 在 的 默认 位 置 为 参照 ， 按 照 top、left 等 元 素 进行 位 置 调整 
以 非 static 的 前 辈 元 素 为 参照 ， 按 照 top、left 等 元 素 进行 位 置 调整 

以 浏览 器 窗口 为 参照 ， 按 照 top、left 等 元 素 进行 位 置 调整 


代码 3.18 演示 了 通过 position 属性 实现 的 4 种 定位 方式 。 


static 


relative 


absolute 


fixed 
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代码 3.18 通过 position 属 性 实现 4 种 定位 方式 


<!DOCTYPE html> 


<html> 
<head> 


<meta charset="UTF-8"> 
<title>Positioning</title> 
<style> 

.externalContainer { 


} 


position: relative; 
width: 400px;; 
height: 300px; 


border-style: solid; 
border-width: lpx; 


.internalContainer { 


} 


position: static; 
width: 80%; 
height: 45%; 


border-style: dashed; 
border-width: lpx; 


.obj { 


border-style: solid; 
border-width: lpx; 


width: 100px;; 
height: S50px; 
background-color: #EEEEEE; 
top: S50px; 
left: 150px; 
text-align: center; 

} 
</style> 
</head> 
<body> 


<div class="externalContainer"> 


<div class="internalContainer"> 
</div> 
<div class="internalContainer"> 


<div class="obj" style="position:static;"> 
static 

</div> 

<div class="obj" style="position:relative;"> 
relative 

</div> 

<div class="obj" style="position:absolute;"> 
absolute 

</div> 
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<div class="obj" style="position:fixed;"> 
fixed 
</div> 
</div> 
</div> 
</body> 

</html> 

这 段 代 码 中 的 网 页 基本 结构 分 为 父 元 素 容器 和 子 元 素 容器 两 层 ， 它 们 分 别 被 赋予 
externalContainer 和 internalContainer 类 ， 父 元 素 和 子 元 素 都 有 边界 线 标示 其 本 身 的 显示 范围 。 
父 元 素 具 有 position 属性 值 relative， 而 子 元 素 被 定义 为 以 position 属性 值 static 的 方式 定位 其 
中 的 元 素 。 第 二 个 被 赋予 CSS 类 internalContainer 的 子 元 素 中 含有 4 个 <div> 元 素 , 每 一 个 被 赋 
予 obj 类 的 <div> 元 素 被 分 别 赋予 4 个 position 属性 值 中 的 一 个 。 另 外 ， 这 4 个 <div> 元 素 都 通 
过 CSS 类 被 分 别 赋予 了 相同 的 top 和 left 属性 。 

第 一 个 <div> 元 素 的 position 属性 值 为 statice， 它 按照 这 个 元 素 在 HTML 文档 中 的 出 现 顺 序 
被 显示 在 第 二 个 internalContainer 容器 的 开始 位 置 ， 而 这 个 元 素 的 top 和 left 属性 将 不 被 采用 。 
第 二 个 <div> 元 素 的 position 属性 值 为 relative, 它 以 这 个 元 素 的 默认 位 置 为 参照 点 (假如 position 
属性 默认 或 者 属性 值 为 static)。 一 个 “ 块 级 ”元 素 在 默认 情况 下 显示 在 前 一 个 元 素 的 下 方 左 侧 
开始 位 置 。 以 这 个 默认 位 置 为 参照 ， 按 照 top 和 left 属性 值 偏 移 ， 距 离 本 身 默 认 位 置 的 项 部 和 
左 侧 各 留 出 相应 的 空间 。 第 三 个 <div> 元 素 的 position 属性 值 为 relative， 它 以 非 static 的 前 辈 元 
素 为 参照 。 由 于 这 个 元 素 的 容器 被 赋予 了 CSS 类 internalContainer， 这 个 类 的 position 属性 值 为 
static， 不 能 够 作为 参照 点 ， 因 此 需要 外 层 元 素 中 拥有 position 属性 值 为 非 static 的 元 素 ， 这 样 
就 找到 了 CSS 类 被 标记 为 externalContainer 的 元 素 。 

在 图 3.13 中 ， 需 要 注意 的 是 ， 第 三 个 <div> 元 素 的 位 置 是 以 externalContainer 元 素 为 参照 ， 
而 不 是 以 第 一 个 internalContainer 元 素 为 参照 。 第 4 个 <div> 元 素 的 position 属性 值 为 fxed， 它 
以 浏览 器 窗口 的 位 置 为 参照 ， 而 不 受 这 个 元 素 的 前 辈 元 素 的 影响 。 


DD Positioning x 
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7. z-index( 纵 深层 次 ) 


前 面 提 及 的 屏幕 定位 是 针对 于 在 同一 个 平面 而 言 的 ， 当 网 页 上 出 现 弹出 菜单 等 局 部 屏幕 被 
遮盖 的 现象 时 ， 就 会 涉及 网 页 的 多 层 结构 问题 。 这 里 指 的 “多 层 结构 ”， 并 不 是 在 前 两 章 中 提 
到 的 一 个 HIML 文件 同时 包含 若干 页 面 ， 而 是 指 在 同一 个 页 面 中 存在 若干 层次 ， 其 中 每 一 个 
层次 可 能 覆盖 整个 浏览 器 窗口 ， 也 可 能 只 涉及 到 屏幕 中 间 的 很 小 一 个 部 分 。 这 些 层次 通常 并 不 
同时 显示 在 网 页 上 。 当 某 一 层 显示 在 浏览 器 中 时 ， 可 能 覆盖 整个 浏览 器 窗口 ， 其 他 层 不 可 见 ， 
也 可 能 通过 使 本 身 这 一 层 半 透明 的 方法 ， 使 其 他 层 即使 被 遮盖 ， 但 仍然 可 见 。 

网 页 的 多 层 结构 由 CSS 属性 z-index 实现 。z-index 采用 整数 作为 属性 值 ， 数 值 越 大 ， 表 明 
这 一 层 所 处 的 位 置 越 高 , 越 靠近 用 户 。 在 一 个 网 页 中 , z-index 值 可 以 通过 JavaScript 动态 改变 ， 
以 达到 动态 切换 各 层 、 显 示 不 同 的 内 容 ， 并 保留 原 有 的 网 页 内 容 的 目的 。z-index 也 可 用 于 网 页 
的 全 部 或 者 局 部 遮盖 的 目的 。 

本 章 将 介绍 如 何 设置 透明 度 ， 通 过 实例 再 次 详细 讲解 z-index 属性 的 应 用 方法 。 


8. 再 谈 长 度 和 宽度 


本 章 在 前 面 已 经 介绍 了 使 用 width 和 height 属性 指定 宽度 和 高 度 的 方法 。 这 两 个 属性 值 既 
可 以 使 用 固定 值 确定 一 个 HTML 元 素 的 显示 大 小 ， 也 可 以 利用 百分比 来 规定 显示 大 小 与 所 在 
容器 的 大 小 比例 。 

在 代码 3.19 中 ， 有 三 幅 相同 的 图 片 ， 第 一 幅 图 片 通过 width:400px: 使 图 片 的 显示 宽度 固定 
为 400px， 而 不 是 图 片 本 身 的 大 小 。 样 式 声明 height:auto; 使 图 片 的 显示 高 度 自动 调整 。 当 图 片 
的 显示 宽度 被 CSS 确定 以 后 ， 图 片 的 高 度 会 根据 显示 宽度 的 调整 比例 进行 相应 的 自动 调整 ， 
而 确保 图 片 不 会 出 现 长 / 宽 比 例 失 调 。 这 段 代码 中 的 第 二 幅 图 片 通过 width:100% 使 图 片 能 够 按 
照 浏览 器 窗口 的 大 小 自动 匹配 。 这 时 候 会 出 现 两 种 情况 : 第 一 种 情况 是 当 这 幅 图 片 显 示 在 几 个 
窗口 大 小 不 同 的 浏览 器 时 ， 图 片 能 够 分 别 按照 浏览 器 窗口 的 宽度 自动 调整 ;第 二 种 情况 是 如 果 
这 个 网 页 显示 在 一 个 浏览 器 中 ， 这 时 人 为 地 改变 浏览 器 窗口 的 大 小 ,浏览 器 中 显示 的 图 片 会 根 
据 浏览 器 窗口 的 动态 变化 而 自动 匹配 。 


代码 3.19 ”显示 宽度 自动 调整 演示 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>max-width</title> 
</head> 
<body> 


<p> 
世界 上 最 高 的 液压 升降 船 阅 ， 位 于 加 拿 大 安大略 省 彼得 堡 市 。 
船闸 建成 于 1904 年 ， 现 今 仍然 能 够 正常 运行 。 
<p> 
<img src="images/Peterborough Lift Lock.jpg" 
alt=" 加 拿 大 彼得 堡 船闸 " 
style="width:400px; height:auto;"> 
<hr> 
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<img src="images/Peterborough Lift Lock.jpg 
alt=" 加 拿 大 彼得 堡 船闸" 
style="width:100%; height:auto;"> 

<hr> 


<img src="images/Peterborough Lift Lock.jpg' 
alt=" 加 拿 大 彼得 堡 船 闻 "style="width:100%; 
max-width:640px; height:auto;"> 
</body> 
</html> 
如 果 一 幅 图 片 能 够 在 手机 等 窄 屏 设备 中 以 100% 的 宽度 正常 显示 ， 但 是 这 种 方式 在 平板 电 
脑 等 宽屏 设备 上 往往 就 不 适用 ， 和 否则 会 出 现 图 片 过 大 ， 对 其 他 网 页 内 容 在 布局 上 造成 压迫 感 的 
情况 ， 这 时 就 需要 对 图 片 的 显示 大 小 进行 适当 的 限制 。 
代码 3.19 中 的 第 三 幅 图 片 使 用 了 max-width( 最 大 宽度 ) 属 性 ， 当 图 片 的 显示 宽度 达到 了 预 
先 设 定 的 值 以 后 ， 图 片 就 不 会 继续 增 大 。 
在 CSS 中 ， 除 了 max-width 以 外 ， 还 有 max-height( 最 大 高 度 )、min-width( 最 小 宽度 )、 
min-height( 最 小 高 度 ) 等 属性 ， 用 于 完成 相应 的 功能 。 
9. float( 浮 动 ) 
float 属性 就 像 它 的 字面 含义 一 一 漂浮 。 当 一 个 HTML 元 素 被 设置 了 float 属性 以 后 ， 它 的 
位 置 就 不 青 像 原先 那样 按照 从 上 到 下 、 从 左 到 右 的 顺序 排列 。 代 码 3.20 演示 了 利用 float 属性 
使 HTML 元 素 “浮动 ”到 某 一 个 位 置 的 方法 。 


代码 3.20 float 属 性 定位 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>Float</title> 
<style> 
#container { 
border-style: dashed; 
border-width: lpx; 
border-color: black; 
width: 400px; 
height: 80px; 
} 
div>div { 
border-style: solid; 
border-width: lpx; 
border-color: black; 
width: 80px; 
height: 40px; 
} 
</style> 
</head> 
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<body> 
<div id="container"> 
<div id="dl" style="float:right">Div 1</div> 
<div id="d2" style="float:right">Div 2</div> 
<div id="d3" style="float:left">Div 3</div> 
</div> 
</body> 
</html> 


显示 效果 如 图 3.14 所 示 。 


3.14 float 属 性 改变 了 默认 的 定位 方式 


代码 3.20 中 ， 有 3 个 <div> 元 素 ， 分 别 被 标识 为 s1、s2 和 s3。 这 3 个 “ 块 级 ”元 素 在 默认 
情况 下 会 依次 从 上 到 下 显示 ( 块 级 元 素 默 认 显示 在 新 的 一 行 中 )。 当 这 3 个 块 级 元 素 被 赋予 float 
属性 后 ， 它 们 就 会 像 内 联 元 素 一 样 显示 在 一 行 中 。 第 一 个 <div> 元 素 按照 float:right 的 要 求 漂浮 
到 这 一 行 的 右边 ， 第 二 个 <div> 元 素 同 样 按照 float:right 的 要 求 漂浮 到 这 一 行 的 右边 。 由 于 第 一 
个 <div> 元 素 已 经 漂浮 到 最 右边 的 位 置 ， 因 此 第 二 个 <div> 元 素 就 浮动 到 这 一 行 右边 第 一 个 有 效 
的 位 置 ， 即 第 一 个 <div> 元 素 的 左边 。 第 3 个 <div> 元 素 按照 float:left 的 要 求 ， 漂 浮 到 这 一 行 的 
左边 。 

说 到 float 属性 的 实际 应 用 ， 不 得 不 提 及 在 传统 网 站 开发 中 经 常用 到 的 以 <table> 表 格 为 基 
础 的 网 页 布局 设计 方法 。 基 于 <table> 的 网 页 布局 , 比较 容易 实现 屏幕 上 各 显示 元 素 的 精确 定位 。 
但 是 ， 这 种 设计 模式 在 布局 上 具有 相当 强 的 “刚性 ”， 虽 然 在 传统 Web 设计 中 成 功 ， 却 无 法 
在 移动 Web 设计 上 取得 同样 的 成 效 。 由 于 移动 设备 屏幕 的 多 样 化 ， 移 动 Web 在 设计 中 应 该 尽 
量 避 免 屏 幕 滚动 ， 尤 其 应 该 避免 网 页 的 水 平 滚动 。 这 样 ， 基 于 <table> 的 设计 模式 明显 违背 了 自 
适应 的 设计 策略 。 现 在 ，Web 设计 的 无 表 化 (tableless) 已 经 成 为 趋势 ，float 属性 就 是 实现 这 一 
设计 目标 的 一 个 有 效 方法 。 在 jQuery Mobile 开发 过 程 中 ， 我 们 虽然 不 会 经 常 直接 使 用 float 属 
性 ， 但 是 仍然 能 够 感受 到 float 属性 无 处 不 在 ， 它 已 经 被 运用 在 jQuery Mobile 系统 之 中 了 。 


10. overflow( 网 页 局 部 滚动 ) 


网 页 上 的 文字 或 者 图 片 ， 往 往 被 包含 在 一 个 <div> 或 者 其 他 元 素 中 。 当 一 个 <div> 的 宽度 和 
高 度 被 限定 ， 而 <div> 中 的 内 容 超出 了 <div> 元 素 的 范围 ， 从 而 形成 了 溢出 现象 时 ， 这 时 就 可 能 
会 出 现 几 种 情况 : 或 许 显示 的 内 容 超出 了 <div> 元 素 被 限定 的 范围 ; 或 许 内 容 被 截断 ; 或 许 <div> 
中 出 现 滚 动 条 ， 使 所 有 的 内 容 都 可 被 访问 到 。overflow 属性 能 够 应 对 以 上 几 种 情况 ， 表 3.9 列 
举 了 overflow 属性 的 几 个 常见 属性 值 。 
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表 3.9 通过 overflow 实 现 的 4 种 溢出 处 理 方式 


属性 值 用 法 说 明 


visible | 默认 值 。 内 容 不 会 被 截断 ， 而 是 在 超出 被 限定 的 矩形 范围 以 外 的 位 置 显示 


hidden | 严格 遵守 被 限定 的 显示 范围 ， 溢 出 的 内 容 被 截断 


scroll | 严格 遵守 被 限定 的 显示 范围 ， 滋 出 的 内 容 被 截断 ， 但 是 增加 了 滚动 条 用 于 访问 溢出 的 内 容 


auto 严格 遵守 被 限定 的 显示 范围 ， 当 溢出 现象 发 生 时 ， 才 会 增加 滚动 条 ， 用 于 访问 溢出 的 内 容 


代码 3.21 演示 了 overflow 属性 值 为 auto 时 ， 浏 览 器 如 图 3.15 中 右 侧 的 截屏 所 示 ， 自 动 为 
溢出 的 内 容 添 加 滚动 条 时 的 情形 。 而 在 默认 情况 下 ， 就 会 像 图 3.15 中 左 侧 的 截屏 那样 ， 内 容 滋 


出 了 所 限定 的 显示 范围 。 
代码 3.21 网 页 局 部 内 容 滚动 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Overflow</title> 


<style> 
.textContainer { 
border-style: groove; 
border-width: 3px; 
border-color: blue; 
width: 280px; 
height: 350px; 
text-align: left; 
font-size: 95%; 
overflow: auto; 
} 
</style> 
</head> 
<body> 
<div class="textContainer"> 
<p> 我 愿 是 溪流 </p> 
<p> 裴 多 菲 </p> 


<p> 我 愿 是 一 条 激流 ， 是 山 间 的 小 河 ， 穿 过 崎 嵌 的 道路 ， 从 山 岩 中 间 流 过 。 
只 要 我 的 爱人 ， 是 一 条 小 鱼 ， 在 我 的 浪花 里 ， 愉 快 地 游 来 游 去 ，</p> 

<p> 我 愿 是 一 片 荒 林 ， 座 落 在 河流 两 岸 ， 我 高 声 呼叫 着 ， 同 暴风 雨 作战 。 

只 要 我 的 爱人 ， 是 一 只 小 鸟 ， 停 在 枝 头 上 鸣叫 ， 在 我 的 怀 里 作 梨 ，</P> 
<p> 我 愿 是 城堡 的 废 址 ， 管 立 在 高 山 之 颠 ， 即 使 被 轻易 毁灭 ， 我 也 毫 不 愧 形 。 
只 要 我 的 爱人 ， 是 一 根 常青藤 ， 绿 色 枝条 恰似 臂膀 ， 沿 着 我 的 前 额 ， 


攀援 而 上 ; </p> 


<p> 我 愿 是 一 所 小 草 棚 ， 在 幽谷 中 隐藏 ， 饱 经 风雨 的 打击 ， 屋 项 留 下 了 创伤 。 
只 要 我 的 爱人 ， 是 能 能 的 烈火 ， 在 我 的 炉膛 里 ， 组 慢 而 欢快 地 闪烁 ; </p> 

<p> 我 愿 是 一 块 云 休 ， 是 一 面 破碎 的 大 旗 ， 在 旷野 的 上 空 ， 疲 倦 地 傲然 挺立 。 
只 要 我 的 爱人 ， 是 黄昏 的 太阳 ， 照 耀 着 我 苍白 的 脸 ， 映 出 红色 的 光 艳 。</p> 
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</div> 
</body> 
</html> 


条 激流 ， 是 山 间 的 小 河 ， 穿 过 
从 六 本 全 入 


我 的 浪花 里 ， 坟 快 地 


和 R 原 是 一 片 兹 林 ， 座 管 在 河流 两 举 ， 我 高 
了 呼叫 警 ， 同 易 风 十 作战 。 只 要 我 的 爱 
本 小 和 全 在 术 关 上风 中 在 和 | 各 奈 是 城堡 的 度 境 ， 答 立 在 高 山 之 颜 ， 
Wh, BP 使 被 轻易 加 天 ， 我 也 毫 下 作 贡 。 只 要 
展 的 受 人 ， 是 一 根 窜 青 功 ， 绿 色 枝条 恰 
g 丑 膀 ， 洛 着 我 的 前额， 学 授 而 上 
ee 罗 原 是 一 所 小 草 椭 ， 在 曲 谷 中 隐 荆 ， 包 
， 兴 首 我 的 前 疡 ， 区 摄 而 上 降 风 十 的 打击 ， 屋 顶 留 下 了 创伤 。 只 要 
Se bes 能 能 的 列 火 ， 在 我 pg 
风 有 的 打出， 民 项 休 下 了 到 念 。 只 要 的 
爱人 ， 是 髓 般 的 烈火， 在 我 的 炉 苯 里 ， 颖 
慢 而 欢快 地 办 糙 ， 


图 3.15 overflow 属 性 值 分 别 为 visible 和 auto 时 的 显示 效果 对 比 


3.3.2 ”字符 与 文本 


1. 字体 


CSS 中 的 字体 涉及 字体 类 型 、 字 体 样式 、 字 体 大 小 等 因素 。 表 3.10 列举 了 CSS 中 与 字体 
相关 的 属性 和 常用 属性 值 。 


表 3.10 CSS 中 与 字体 相关 的 常用 属性 


属 性 属性 值 含义 与 用 法 说 明 
XX-SIDall 
X-SIall 
11 
a 设置 字体 大 小 。 按 照 属性 什 的 排列 顺序 ， 含 义 分 别 为 非常 小 、 比 较 小 、 小 、 
en 中 等 、 大 、 比 较 大 、 非 常 大 
large 
xX-laree 
font-size 
xXx-large 
inherit 
这 一 组 属性 值 与 父 元 素 中 的 字体 大 小 有 关 。inherit 表示 继承 自 父 元 素 ; 
二 smaller 和 larger 分 别 表示 与 父 元 素 中 的 字体 相 比 ， 比 较 小 或 者 比较 大 ; 或 
Ja 者 采用 与 父 元 素 中 字体 大 小 相对 应 的 百分比 
% 
长 度 使 用 绝对 长 度 指定 字体 大 小 。 单 位 可 以 采用 px、em、cm 等 
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续 表 
属 性 属性 值 含义 与 用 法 说 明 
Dormal 默认 值 
bold 
bolder 设置 字形 粗细 。 按 照 属性 值 的 排列 顺序 ， 含 义 分 别 为 组、 比较 粗 、 比 较 细 
font-weight 站 | 
lighter 
数字 指定 100~900 之 间 ( 包 含 )， 并 且 是 100 的 倍数 的 数 ， 表 示 字 形 粗 细 的 相对 
关系 。400 等 同 于 属性 值 normal 
Dormal 默认 值 
italic 这 两 个 属性 值 都 表示 斜体 。 这 两 种 斜体 风格 与 字体 设计 有 关 。italic 可 能 被 
font-style 显示 为 与 默认 字体 不 同 的 字体 类 型 , 而 oblique 则 是 真正 保持 字体 原貌 的 斜 


oblique 体 字形 。 不 是 所 有 的 字体 都 具有 italic 字形 , 在 这 种 情况 下 ,文字 可 能 被 显 


示 为 oblique 


font-variant 


normal 默认 值 


small-caps, 小 写字 母 被 自动 转换 成 大 写 ， 并 以 比 正常 大 写字 母 略 小 的 方式 显示 


2. 文本 


Css 中 的 
表 3.11 多 


文本 涉及 文本 对 齐 、 行 高 、 换 行 、 字 间距 、 行 间距 、 文 字 缩 进 等 因素 。 
举 了 CSS 中 与 文本 相关 的 属性 与 常用 属性 值 。 
表 3.11 CSS 中 与 文本 相关 的 常用 属性 


属 性 属性 值 含义 与 用 法 说 明 
left 
text-align right 
a 设置 字体 对 齐 方式 。 含 义 分 别 为 左 对 齐 、 右 对 齐 、 居 中 对 齐 、 两 端 对 齐 
justi 
normal 默认 值 
line-height % 与 当前 字体 大 小 的 百分比 
长 度 以 px、cm 等 单位 表示 的 固定 行 高 
数字 与 当前 字符 大 小 的 倍数 关系 ， 比 如 1 倍 行 高 、2 倍 行 高 等 
Dormal 默认 值 
word-break break-all 允许 在 一 个 单词 中 间 换 行 
keep-all 禁止 在 一 个 单词 中 间 换 行 
在 表 3.11 中 ， 关 于 单词 词 间 换行 的 属性 word-break 是 使 用 中 文 的 开发 人 员 容 易 忽略 的 一 


个 重要 属性 ， 这 个 属性 在 英语 等 以 字母 /单词 为 基础 的 语言 中 ， 在 手机 等 窜 屏 幕 上 处 理 超 长 单词 
时 需要 用 到 。 代 码 3.22 演示 了 word-break 属性 值 对 于 长 单词 和 长 数值 的 处 理 方法 。 读 者 应 当 
对 照 图 3.16， 观 察 当 属性 值 分 别 为 keep-all 和 break-all 时 对 实际 显示 效果 的 影响 ， 尤 其 需要 注 
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显示 范围 边界 、 在 单词 中 间 的 换行 ， 以 及 显 


四 wordbreak x 民 
€ 3 © Dlocalhost/ 


生物 分 类 学 中 的 域 《domain) 和 界 (kingdom) 

-原文 选 自 维基 百科 

In biology, kingdom is the second highest tazonomic rank 
below domain Kingdoms are divided into smaller groups 
called phyla. Traditionally, textbooks from the United States 
used a system of si kingdoms (Animalia, Plantae, Fungi, 
Protista, Archaea, and Bacteria) while British, Australian and 
Latin American textbooks used five kingdoms (Animalia, 
Plantae, Fung, Protoctista, and Prokaryota/Monera). Some 
recent classifications based on modern cladistics have 
explicitly abandoned the term "ingdom", noting that the 
traditional kingdoms are not monophyletic, ie., do not consist 
of all the descendants of a common ancestor. 
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示范 围 溢出 等 情况 。 


站 wordbreak 
所 全 


生物 分 类 学 中 的 域 《domain) 和 界 (kingdom) 
一 原文 先 自 维基 百科 


In biology, kingdom is the second highest taxonomic rankc bel 
ow domain Kingdoms are divided into smaller groups called 
Phyla Traditionally, textbooks from the United States used a 
system of six kingdoms (Animalia, Plantae, Fung, Protista, A 
rchaea, and Bacteria) while Britsh Australian and Latin Ame 
rican textbooks used five kingdoms (Animalia, Plantae, Fungi, 
Protoctista, and ProkaryotaMonera). Some recent classificat 
ions based on modem cladistics have explicitly abandoned 也 
e term "kingdom", noting that the traditional kingdoms are no 

monophyletic, ie., do not consist of al the descendants of a c 
ommon ancestor 


D localhost/c 


ext_word-break 家 | 风 三 


圆周率 
3.1415926535897932384626433832795028841971693993751058 


圆周 率 3 14159265358979323846264338327950288419 
71693993751058 


图 3.16 word-break 属 性 值 分 别 为 keep-all 和 break-all 时 对 换行 操作 的 影响 


代码 3.22 ”word-break 属 性 演示 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>word-break</title> 
<style> 
div { 
width: 370px; 
} 
</style> 
</head> 
<body> 
<div> 
<div> 生 物 分 类 学 中 的 域 (domain) 和 界 (kingdom) </div> 
<div style="font-size:smaller;">-- 原 文选 自 维 基 百 科 </div> 
</div> 
<div style="word-break:keep-all"> 
In biology, kingdom is the second highest taxonomic rank 
below domain. Kingdoms are divided into smaller groups 
called phyla. Traditionally, textbooks from the United 
States used a system of six kingdoms (Animalia, Plantae, 
Fungi, Protista, Archaea, and Bacteria) while British, 
Australian and Latin American textbooks used five 
kingdoms (Animalia, Fungi, and 
Prokaryota/Monera). Some recent classifications based 
on modern cladistics have explicitly abandoned the term 
"kingdom", 


Plantae, Protoctista, 


noting that the traditional kingdoms are not 


monophyletic, i.e., do not consist of all the descendants 
of a common ancestor. 


</div> 
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<div style="word-break:keep-all"> 
圆周 率 3.1415926535897932384626433832795028841971693993751058 
</div> 
</body> 
</html> 


3.3.3 ”色彩 与 图 形 


1. 颜色 名 称 与 RGB 颜色 值 


CSS 可 以 将 RGB 颜色 值 或 者 预定 义 的 颜色 名 称 用 于 样式 声明 。RGB 颜色 值 是 以 “#” 开 
始 的 六 位 十 六 进 制 数 ， 其 中 每 两 位 一 组 ， 分 别 代表 红 绿 蓝 三 种 颜色 ， 每 一 种 颜色 的 十 六 进 制 值 
从 #00 到 #FF， 其 对 应 的 十 进 制 整数 值 范围 是 从 0 到 255。#000000 为 黑色 ， 克 FFFFF 为 白色 。 

CSS 3 的 色彩 模块 (技术 规范 ) 定 义 了 16 种 基本 颜色 名 称 及 其 颜色 值 ， 而 被 广泛 采用 的 CSS 
颜色 名 称 大 约 有 140 个 左右 。 这 些 颜 色 名 称 使 常用 颜色 便于 在 Web 开发 中 直接 使 用 。 

表 3.12 仅 列举 了 CSS 中 很 小 一 部 分 常用 颜色 名 称 和 十 六 进 制 颜色 值 。 

表 3.12 CSS 中 常用 的 颜色 名 和 颜色 值 


CSS 颜色 名 称 | 颜 色 颜 色 颜色 值 
White 白 浅 粉红 #EFB6CI 
WhiteSmoke 烟 白 [arsrsFs [pnrg | 粉红 #FFCOCB 
Snow 雪白 紫罗兰 #EE82EE 
SeaShell 贝壳 白 深 紫 罗兰 #9400D3 
Yellow 黄 purp 紫 #800080 
YellowGreen 黄 绿 绿 #008000 
Gold 金黄 海 绿 #2E8B57 
Brown 棕 深 绿 #006400 
wheat 4 霉 | fspEB3 |re | #EFO000 
Chocolate 巧克力 深 红 #8B0000 


Orange 橙 三 FA500 LightGray 浅 灰 #D3D3D3 
OrangeRed 橙 红 #FF4500 DarkGray k #A9A9A9 
DarkOrange 深 橙 #FF8CO0 Black 黑 #000000 


2. 文本 颜色 


CSS 中 的 color 属性 规定 了 文本 的 颜色 ， 当 使 用 color 属性 为 一 段 文本 设置 颜色 时 , 只 需要 
为 文本 所 在 的 容器 指定 color 属性 即 可 。 

3. 背景 颜色 

背景 颜色 可 以 是 指 整个 网 页 的 背景 颜色 , 也 可 以 是 网 页 的 一 个 部 分 的 背景 颜色 , 比如 <div> 
的 背景 颜色 ,一 个 基本 的 背景 颜色 设置 通过 CSS 的 background-color 属性 实现 .background-color 
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的 属性 值 允许 使 用 十 六 进 制 颜色 值 ， 或 者 是 CSS 中 预先 定义 的 颜色 名 称 。 


背景 颜色 除了 使 用 单一 颜色 外 , 还 可 以 通过 CSS 3 中 新 增加 的 渐变 功能 实现 各 种 不 同 的 背 
景 颜 色 变换 。CSS 3 支持 线性 和 放射 状 两 种 渐变 形式 ， 而 线性 渐变 又 包含 了 水 平 、 垂 直 、 对 角 
线 及 其 不 同 的 方向 等 多 种 渐变 方式 。 

代码 3.23 在 三 个 单独 的 <div> 中 分 别 演 示 三 种 不 同 的 线性 渐变 方向 。 


代码 3.23 ”背景 颜色 线性 渐变 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset="UTF-8"><title>Background - Color - Gradients</title> 


<style> 

.container { 
width: 
height: 


200px; 
100pzx; 


border-style: solid; 
border-width: lpx; 


float: 

} 

-fromTop { 
background: 
background: 
background: 
background: 

} 

.fromLeft { 
background: 
background: 
background: 
background: 

i 

.fromTopLeft { 
background: 
background: 
background: 
background: 

} 

</style> 

</head> 
<body> 
<div> 


left; 


-webkit-linear-gradient (white, gray); 
-0o-linear-gradient (white, gray); 
-moz-linear-gradient (white, gray); 
linear-gradient (white, gray); 


-webkit-linear-gradient (left, white, gray); 
-0o-linear-gradient (right, white, gray); 
-moz-linear-gradient (right, white, gray); 
linear-gradient (to right, white, gray); 


-webkit-1linear-gradient (top left, white, gray); 
-0o-linear-gradient (bottom right, white, gray); 
-moz-linear-gradient (bottom right, white, gray); 
linear-gradient (to bottom right, white, gray); 


<div class="container fromTop"> 上 --> F</div> 
<div class="container fromLeft"> 左 --> 右 </div> 
<div class="container fromTopLeft"> 左 上 --> 右 F</div> 


</div> 
</body> 
</html> 
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运行 效果 如 图 3.17 所 示 。 


目 Background - Color - Gradier x 
> © Docalhost 
目 --> 下 


3.17 ”线性 渐变 的 效果 


这 里 的 CSS 样式 声明 有 以 下 特点 : 

e@ ”在 本 书 中 第 一 次 使 用 了 带 有 浏览 器 前 级 的 CSS 属性 ， 如 -webkit-、-o- 和 -moz-。 

@ linear-gradientO 是 正式 的 CSS 语法 ,这 一 行 必须 放 在 所 有 带 有 浏览 器 前 级 的 属性 之 后 。 

@ linear-gradient(0) 带 有 若干 参数 ， 如 果 方 向 参数 缺 省 ， 则 默认 为 自 上 而 下 渐变 。 

@ ”linear-gradient() 的 参数 中 至 少 需要 注 明 两 种 颜色 ， 如 果 颜 色 多 于 两 个 ， 就 会 产生 多 种 

颜色 连续 渐变 的 光谱 效果 。 

e@ ”必须 注意 一 一 方向 值 参 数 在 带 有 不 同 的 浏览 器 前 级 的 CSS 属性 中 的 使 用 方法 不 同 。 

本 书 中 还 将 使 用 更 多 带 有 浏览 器 前 级 的 CSS 属性 。 这 些 前 级 已 经 能 够 说 明 它 们 所 适用 的 
浏览 器 ， 比 如 -webkit- 适 用 于 Safari 等 以 WebKit 为 核心 的 浏览 器 ，-o- 适 用 于 Opera 浏览 器 ， 而 
-moz- 适 用 于 Firefox 浏览 嚣 。 这 些 特殊 前 级 的 产生 背景 是 当 CSS 相关 技术 规范 还 没有 形成 标准 
化 以 前 , 浏览 器 的 开发 商 已 经 开始 着 手 进行 相关 新 标准 的 实验 和 测试 ,为 了 区 别 于 将 来 正式 的 
CSS 属性 ,浏览 器 厂商 在 相应 的 属性 之 前 加 上 了 浏览 器 前 级 。 因此， 这 些 带 有 前 缀 的 属性 只 是 

-个 临时 方案 。 随 着 CSS 的 标准 化 ， 这 些 特殊 属性 也 将 随 之 逐步 淘汰 。 在 本 书 的 写作 过 程 中 ， 

Chrome 浏览 器 已 经 能 够 正确 处 理 linear-gradient 属性 ， 而 不 再 需要 -webkit- 前 级 。 


4. 透明 度 


当 网 页 上 有 了 两 个 可 见 元 素 出 现 倒 加 时 ， 可 以 通过 opacity 属性 设置 元 素 的 透明 度 ， 以 达到 
不 同 的 显示 效果 。 当 opacity 属性 值 为 1 时 ， 表 示 完 全 不 透明 ， 当 opacity 属性 值 为 0 时 ， 表 示 
完全 透明 。 

透明 意味 着 存在 着 重合 。 本 书 3.3.1 小 节 中 介绍 过 与 纵深 层次 相关 的 z-index 属性 ， 下 面 通 
过 代码 3.24 来 演示 opacity 属性 的 使 用 方法 以 及 一 个 非常 实用 的 z-index 属性 应 用 技巧 。 


代码 3.24 ”屏幕 遮盖 与 透明 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Background - Color - Opacity</title> 
<style> 
#html, body { 
padding: 
margin: 07 
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width: 100%; 

} 

#dimoverlay { 
position: fixed; 
height: 100%; 
width: 100%; 
top: Opxs; 
left: Opx; 
background-color: black; 

opacity: 由 三友 

display: none; 

} 

#popupDiv { 
position: absolute; 
height: 100px; 
width: 300px; 
background-color: white; 
opacity: 0.8; 
display: none; 
text-align: center; 
top: 50%? 
Eefts 50%7 
margin-top: -50px; 
margin-left: -150px; 

} 

</style> 
<script> 


function dim() { 
Var overlayDiv = document .getElementById ("dimOoverlay"); 
overlayDiv.style.zindex = 1000; 
overlayDiv.style.display = "block"; 
Var popup = document .getElementById ("popupDiv"); 
popup.style.zindex = 1050; 
popup.style.display = "block"; 

} 

function removeDim() { 
Var overlayDiv = document .getElementById ("dimOverlay"); 
overlayDiv.style.display = "none"7 
Var popupDiv = document .getElementById ("popupDiv"); 
popupDiv.style.display = "none"7 

} 

</script> 
</head> 
<body> 
<div id="main"> 
<img src="images/Peterborough Lift Lock.jpg" 
alt=" 加 拿 大 彼得 堡 船闸 " 


style="width:400px; height:auto;"> 


> 
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<hr> 
<button onclick="dim() "> 请 点 击 </button> 
</div> 


<div id="dimOverlay">&nbsp;</div> 
<div id="popupDiv"> 
<button onclick="removeDim()" 
style="position:relative;top:30px; "> 恢复 </button> 
</div> 
</body> 
</html> 


代码 3.24 实现 了 一 个 如 图 3.18 所 示 的 屏幕 遮盖 功能 。 当 用 户 按 下 第 一 个 画面 中 的 按钮 以 
后 ， 整 个 浏览 器 窗口 像 是 被 黑色 半 透 明 玻璃 让 盖 了 。 由 于 原始 屏幕 已 经 被 新 增加 的 一 层 遮挡 ， 
原来 屏幕 上 的 按钮 、 链 接 等 都 将 无 法 收 到 用 户 的 鼠标 点 击 事件 ， 原 来 的 屏幕 暂时 失去 了 作用 ， 
直到 用 户 在 第 二 个 屏幕 的 弹出 框 中 单 击 “恢复 ”按钮 ， 屏 幕 才 会 回 到 初始 状态 。 

整个 网 页 在 纵深 方向 上 一 共 分 为 三 层 ， 在 网 页 代码 中 表现 为 三 个 并 列 的 <div>， 其 中 后 两 
个 在 初始 状态 下 不 可 见 (display: none;)。 当 “请 点 击 ” 按 钮 被 按 下 时 ， 后 两 个 <div> 被 JavaScript 
旦 序 同时 设置 为 可 见 ， 并 被 分 别 赋 予 z-index 属性 1000 和 1050。 在 正常 情况 下 ， 网 页 的 默认 
z-index 不 会 超过 999( 采 用 某 些 JavaScript 框架 的 网 页 除外 )， 因 此 ， 当 一 个 用 户 自 定义 的 <div> 
的 z-index 值 大 于 或 等 于 1000 时 ， 可 以 确保 这 些 层 能 够 被 显示 在 原 有 的 网 页 内 容 之 上 上， 遮盖 原 
有 的 网 页 内 容 ， 而 不 是 被 原 有 的 网 页 内 容 所 遮盖 。 在 这 三 层 中 ， 网 页 加 载 时 显示 的 这 一 层 处 于 
最 底层 ， 黑 色 半 透明 层 处 于 中 间 ， 而 “恢复 ”按钮 所 在 的 这 一 层 处 于 最 高 层 位 置 。 图 3.18 中 的 
第 二 个 画面 演示 了 这 三 层 的 登 加 与 覆盖 关系 。 

后 两 层 的 opacity 值 被 分 别 设置 为 0.5 和 0.8， 其 效果 同样 可 以 从 图 3.18 的 第 二 个 画面 上 看 
到 ，opacity 值 越 大 ， 透 明度 越 低 。 


) Background - Color - Opacky x 
© D localhost/CHO3/ 


Background - Color - Opackty x 
© D localhost/CHO3/backgrourr 


图 3.18 ”遮盖 关系 、 透 明度 的 设置 与 实际 应 用 效果 
5. 背景 图 片 


- 幅 图 片 可 以 通过 <img> 标 签 来 显示 , 也 可 以 通过 CSS 的 background-image 属性 显示 在 一 
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个 容器 元 素 的 背景 上 。 如 果 图 片 大 于 容器 的 大 小 ， 图 片 会 自动 沿 着 水 平方 向 (X 轴 ) 或 者 垂直 方 
向 (Y 轴 ) 重 复 ， 直 到 铺 满 容器 。 图 片 的 重复 由 属性 background-repeat 控制 ， 属 性 值 及 其 含义 如 
表 3.13 所 示 。 


表 3.13 通过 background-repeat 实 现 的 背景 图 片 重复 方式 


属性 值 用 法 说 明 
Tepeat 默认 值 。 背 景 图 片 同时 沿 着 水 平方 向 和 垂直 方向 重复 显示 
Tepeat-X 背景 图 片 水 平 重复 
Tepeat-y 背景 图 片 垂 直 重 复 
no-repeat 背景 图 片 无 重复 i 


除了 用 于 在 浏览 器 窗口 背景 或 者 网 页 的 局 部 背景 上 显示 一 幅 图 片 外 , 当 CSS 3 中 有 关 渐 变 
的 功能 还 没有 出 现 的 时 候 , 通过 背景 图 片 也 能 够 实现 类 似 的 功能 。 如 果 想 要 实现 浏览 器 窗口 从 
白色 到 灰色 ， 自 上 而 下 的 渐变 效果 ， 就 可 以 准备 一 个 宽度 为 1px 的 细 长 图 片 ， 图 片 的 颜色 按照 
从 白色 到 灰色 , 自 上 而 下 渐变 , 与 希望 得 到 的 屏幕 背景 渐变 效果 一 致 。 然 后 把 background-repeat 
属性 的 值 设置 为 repeatx， 使 图 片 仅仅 沿 着 水 平方 向 重复 ， 直 到 铺 满 全 部 浏览 器 宽度 。 在 垂直 
方向 上 ， 由 于 图 片 不 是 由 单一 颜色 构成 ， 无 法 在 垂直 方向 上 重复 ， 又 由 于 浏览 器 窗口 往往 超过 
图 片 的 高 度 , 这 样 就 造成 了 屏幕 底部 没有 被 图 片 覆盖 的 地 方 出 现 大 片 空白 。 为 了 解决 这 个 问题 ， 
我 们 必须 把 网 页 的 底 色 设 置 为 与 渐变 图 片 的 底部 颜色 一 致 ， 这样 ， 就 可 以 实现 正中 渐变 颜色 的 
底部 与 网 页 底 色 的 无 颖 对 接 。 

代码 3.25 通过 一 个 非常 简单 的 网 页 演示 了 上 述 实际 应 用 。 

代码 3.25 ”通过 背景 图 片 实现 的 背景 渐变 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>Background - Image - Gradients</title> 


<style> 
body { 
min-width: S00px; 
min-height: S00px; 


background-image: url('images/gray gradient.bmp'); 
background-repeat: repeat-x; 
background-color: gray; 
} 
</style> 

</head> 

<body> 

</body> 

</html> 


> 113 


[| jQuery Mobile 移 动 网 站 开发 


3.4 图 形变 换 与 动画 效果 


3.4.1 二 维 变换 
变换 (transform) 或 者 称 为 变形 ， 是 使 显示 在 浏览 器 中 的 一 个 HTML 单元 产生 位 置 改变 、 旋 


转 、 缩 放 、 倾 斜 等 不 
生 在 同一 个 平面 上 。 
在 本 书 的 写作 过 


同 的 显示 效果 。 变 换 分 为 二 维和 三 维 两 种 。 二 维 变换 的 所 有 显示 效果 都 发 


程 中 ， 标 准 的 二 维 变换 CSS 语法 还 没有 被 所 有 的 主流 浏览 器 支持 。Opera 


和 Firefox 已 经 能 够 ] 
有 属性 。 当 读者 在 使 
持 度 ， 并 根据 项 目的 


E 确 处 理 二 维 变换 的 标准 属性 , 而 Chrome 还 需要 使 用 带 有 浏览 器 前 绥 的 特 
用 CSS 开发 屏幕 元 素 变换 功能 时 ， 需 要 注意 浏览 器 对 CSS 标准 语法 的 支 
需求 ， 在 所 有 的 目标 浏览 器 上 做 一 个 完全 测试 。 


代码 3.26 演示 了 CSS 二 维 变换 中 的 主要 功能 。 
代码 3.26 ”二 维 变换 演示 


<!DOCTYPE html 
<html> 
<head> 


2 


<meta charset="UTF-8"> 
<title>2D Transforms</title> 


<style> 
div { 
width: 150px; 
height: 100px; 
background-color: lightGray; 
cursor: pointer; 


} 


.translateRight { 
-webkit-transform: translate(150px, Opx); 
transform: translate(150px, Opx); 


} 


.rotate30 { 
-webkit-transform: rotate(30deg); 
transform: rotate(30deg); 


} 


.rotate45 { 
—webkit-transform: rotate(45deg); 
transform: rotate(45deg); 


} 


.rotateM60 { 
-webkit-transform: rotate(-60deg); 
transform: rotate(-60deg); 


} 


.scale80Percent { 
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-webkit-transform: scale(0.9,0.9); 
transform: scale(0.9,0.9); 

} 

.scaleDoubleWidth { 
-webkit-transform: scale(2,1); 
transform: scale(2,1); 


| 
-skew { 
-webkit-transform: skew(40deg,10deg); 
transform: skew(40deg,10deg); 
} 
</style> 
</head> 
<body> 


<div id="obj"” onclick="back()">CSS 二 维 变换 </div> 
<button onclick="translateRight () "> 右 移 </button> 
<br> 

<button onclick="rotate30() "> 旋转 30 度 </button> 


<button 
<button 


rotate45 () "> 旋转 45 度 </button> 
onclick="rotateM60 () "> 旋转 -60 度 </button> 


<br> 


<button onclic 


scale80Percent () "> 缩小 20%</button> 


<button onclick= scaleDoubleWidth () "> 宽度 加 倍 </button> 
<br> 

<button onclick="skew() "> 倾斜 </button> 

<script> 


Var obj = document .getElementById("obj"); 

function back() { 
obj.className = " "7 

} 

function translateRight() { 
obj.className = "translateRight"; 

} 

function rotate30() { 
obj.className = "rotate30"; 

} 

function rotate45() { 
obj.className = "rotate45"; 

} 

function rotateM60() { 
obj.className = "rotateM60"; 

} 

function scale80Percent() { 
obj.className = "scale80Percent"; 

} 

function scaleDoubleWiqdth() { 
obj.className = "scaleDoubleWidth"; 

} 


function skew() { 
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obj -className = "skew"; 
} 
</script> 
</body> 
</html> 


代码 3.26 定义 了 4 组 (每 组 一 行 )、 一 共 7 个 按钮 。 每 个 按钮 通过 JavaScript 动态 赋予 一 个 
<div> 相 应 的 CSS 类 ， 每 一 组 按钮 对 应 了 一 个 二 维 变换 功能 。 这 4 组 按钮 分 别 代表 了 位 移 、 旋 
转 、 缩 放 和 倾斜 ， 真 正 实现 二 维 变换 功能 的 是 定义 在 CSS 类 中 的 transform 属性 。 根 据 需要 实 
现 的 变换 功能 ， 每 一 个 transform 属性 又 带 有 不 同 的 方法 ， 同 时 ， 这 些 方法 中 的 参数 具体 描述 
了 变换 的 程度 。 以 transform: translate(150px, 0px): 为 例 ，transform 属性 表示 变换 ，translate() 方 
法 表示 平面 位 移 ，translate(0) 方 法 中 的 两 个 参数 分 别 说 明 在 X 轴 和 立轴 上 的 偏 移 量 。 

二 维 变换 是 指 在 一 个 平面 上 的 图 形变 化 ， 如 果 一 个 二 维 变换 方法 带 有 两 个 参数 ， 通 常 分 别 
是 指 在 X 轴 和 Y 轴 上 的 偏 移 量 、 旋 转角 度 ， 或 者 缩放 倍数 。 而 像 rotate(45deg) 这 样 ，rotate0 
方法 中 的 参数 是 指 如 图 3.19 所 示 的 顺 时 针 旋 转 的 角度 。 


右 移 


30 席 | | 竺 45 庆 | | 放 竺 60 席 人 
续 小 20% | | 宽度 加 信 | 
倾斜 


3.19 转动 45 度 


3.4.2 三 维 变换 


三 维 变换 是 在 以 X 轴 和 Y 轴 为 基础 的 二 维 变换 基础 上 ， 增 加 了 对 Z 轴 的 支持 ， 使 图 形变 
换 从 一 个 平面 转移 到 立体 空间 。 例 如 ，rotateX0 方 法 是 使 图 形 环绕 XX 轴 在 立体 空间 旋转 ， 而 不 
是 像 二 维 变换 那样 , 在 同一 个 平面 上 旋转 。 与 二 维 变换 类 似 , 三 维 变换 同样 实现 了 位 移 、 旋转、 
缩放 等 功能 ， 但 是 ， 三 维 变换 在 相关 CSS 属性 及 其 参数 的 使 用 F， 远 比 二 维 变换 复杂 ， 尤 其 
是 三 维 变换 中 CSS 属性 的 简写 形式 。 这 里 介绍 三 维 变换 中 与 jQuery Mobile 定制 相关 的 一 部 分 
基本 的 变换 功能 。 代 码 3.27 演示 了 一 个 由 <div> 构 成 的 图 形 环绕 X 轴 转 动 的 实例 。 

代码 3.27 ”环绕 X 轴 转动 


<!1DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>3D Transforms - Rotatex</title> 
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<style> 
div { 
width: 150px; 
height: 100px; 


background-color: lightGray; 
cursor: pointer; 

} 

.rotatex30 { 
-webkit-transform: rotateXx(30deg); 
transform: rotatex(30deg); 

} 

.rotatex60 { 
-webkit-transform: ITotateX(60deg) 7 
transform: rotateX (60deg); 

} 

-rotatex150 { 
-webkit-transform: IotateX(150deg) 7 


transform: rotatex (150deg); 
} 
</style> 
</head> 
<body> 


<div id="obj"” onclick="back()">CSS 三 维 变换 <br> 演 示 </div> 
<button onclick="rotateXx30() "> 围绕 x 轴 转 30 度 </button> 
rotatex60 () "> 围绕 Xx 轴 转 60 度 </button> 
rotatex150() "> 围绕 X 轴 转 150 度 </button> 


<button onclic 
<button onclick: 
<br> 
<script> 
Var obj = document .getElementById ("obj"); 
function back() { 
obj .className = " "7 


} 
function rotateX30() { 
obj.className = "rotatex30"; 


} 
function rotatex60() { 
obj.className = "rotatex60"; 


} 
function rotatex150() { 
obj .className = "TotateX150"7 
</script> 
</body> 
</html> 
这 段 代码 的 核心 是 transform: rotateX(60deg); 这 是 环绕 X 轴 转 动 的 标准 语法 , Chrome 浏览 
器 还 需要 加 上 -webkit- 前 级 ,图 3.20 显示 了 当 一 个 <div> 环 绕 以 这 个 图 形 中 部 的 水 平 线 为 X 轴 转 
动 60 度 以 后 的 实际 效果 ， 图 形 中 的 文字 也 随 着 图 形 的 转动 发 生变 形 。 当 我 们 使 图 形 转动 到 90 
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度 和 180 度 这 个 区 间 时 ,图 形 中 的 文字 会 出 现 颠 倒 现 象 。 如 果 把 代码 3.27 中 的 rotateX0 方 法 替 
换 为 rotateY0 方 法 ， 并 修改 转动 角度 ， 可 以 得 到 如 图 3.21 所 示 的 转动 效果 。 


站 3D Transforms - Rotate x 


€ 3 CC | locahost/cH | QO 


| 国 绕 交 30 度 | | 围绕 关 和 畦 60 度 围绕 Y 轴 转 45 度 
围绕 X 转 150 度 | 


3.20 ”围绕 X 轴 转动 60 度 3.21 围绕 Y 轴 转动 45 度 


三 维 变换 中 还 有 很 多 方法 。 这 些 方法 的 共同 点 都 是 以 三 维 坐标 系 的 三 条 轴 为 依据 产生 的 变 
换 效 果 。 其 他 三 维 变换 方法 这 里 不 再 详细 介绍 。 


3.4.3 过渡 效果 


CSS 过 渡 效 果 是 指 一 个 或 者 多 个 CSS 属性 在 从 一 种 状态 逐渐 转变 为 另外 一 种 状态 的 过 程 
中 所 产生 的 显示 效果 。 过 渡 效 果 与 前 面 两 个 小 节 中 介绍 的 静态 变换 效果 不 同 ， 网 页 用 户 能 够 观 
察 到 明显 的 动态 变化 过 程 。 过 渡 效 果 也 与 CSS 渐变 效果 不 同 ，CSS 渐变 效果 是 指 在 网 页 空间 
上 的 静态 演变 ， 而 过 渡 效 果 则 是 指 在 一 定时 间 范 围 内 的 动态 渐进 变化 过 程 。 

实现 CSS 过 渡 效 果 需 要 具备 以 下 两 个 要 素 : 

@ 通过 CSS 选择 器 指定 特定 目标 元 素 。 

@ 目标 元 素 某 一 个 (或 某 几 个 ) 属 性 的 初始 (默认 ) 状 态 和 过 渡 效 果 的 终止 状态 。 

代码 3.28 体现 了 上 述 两 个 基本 条 件 。 这 段 代 码 的 目的 ,是 当 鼠 标 移动 到 网 页 上 指定 的 <div> 
元 素 以 后 ， 元 素 的 宽度 在 3 秒 钟 时 间 范 围 内 ， 从 100px 持续 渐进 加 大 到 150px。 网 页 用 户 应 该 
在 支持 过 渡 效果 的 浏览 器 上 看 到 平滑 的 宽度 变化 过 程 。 虽 然 这 段 代 码 为 了 把 注意 力 集中 到 CSS 
语法 上 ， 只 是 使 用 了 元 素 选 择 器 “div” 选 择 该 网 页 中 的 所 有 <div> 元 素 ， 但 由 于 这 个 网 页 仅 包 
含 一 个 <div> 元 素 ， 因 此 不 会 造成 混淆 。 在 真实 项 目 开发 环境 下 ， 一 个 网 页 会 包含 多 个 <div> 和 
其 他 元 素 ， 这 时 ， 应 该 选用 合理 的 CSS 选择 器 来 选择 需要 实现 过 渡 效 果 的 特定 元 素 。 

首先 ， 代 码 3.28 在 元 素 选择 器 “div” 中 规定 了 网 页 中 <div> 元 素 的 默认 (初始 ) 样 式 风 格 ， 
其 中 包括 初始 宽度 width: 100px:, 并 通过 transition: width 3s: 规 定 使 用 该 选择 器 的 所 有 元 素 都 具 
有 过 渡 效 果 , 过 渡 效果 发 生 在 被 选择 元 素 的 width 属性 上 , 过 渡 效 果 从 开始 到 结束 会 持续 3 秒 。 

其 次 ， 通 过 伪 类 :hover 规定 当 鼠 标 移动 到 被 选择 的 <div> 元 素 上 时 ，<div> 的 宽度 为 150px。 
从 以 上 描述 可 以 看 到 ， 这 段 代 码 通 过 CSS 选择 器 指定 了 需要 实现 过 渡 效 果 的 元 素 ， 规 定 了 过 
渡 发 生 的 属性 width 及 其 始末 状态 100px 和 150px。 这 样 ， 当 鼠标 移动 到 网 页 上 的 一 个 <div> 元 
素 上 方 以 后 , 这 个 <div> 元 素 的 宽度 就 会 在 3 秒 钟 左右 从 100px 平滑 增加 ,直到 宽度 达到 150px 
为 止 。 
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代码 3.28 单一 CSS 属 性 的 过 渡 效果 


<!1DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Transition - 单一 css 属性 过 渡 效 果 </title> 


<style> 
div { 
width: 100px; 
height: 100px; 
background-color: lightGray; 
transition: width 3s; 


-webkit-transition: width 3s; 
} 


div:hover { 


width: 150px; 
} 
</style> 
</head> 
<body> 
<div>gnbsp;</div> 
</body> 
</html> 


代码 3.28 演示 了 发 生 在 单一 CSS 属性 上 的 过 渡 效 果 。 在 很 多 情况 下 ， 网 页 上 的 过 渡 效 果 
需要 同时 发 生 在 两 个 或 更 多 的 CSS 属性 上 。 代 码 3.29 演示 了 width、height、background-color 
三 个 CSS 属性 同时 在 3 秒 钟 时 间 范 围 内 发 生 过 渡 的 效果 。 

代码 3.29 ”多重 CSS 属 性 的 过 渡 效 果 

<!DOCTYPE html> 

<html> 

<head> 


<meta charset="UTF-8"> 
<title>Transition - 多 重 css 属性 过 渡 效 果 </title> 


<style> 
div { 
width: 100px; 
height: 100px; 
background-color: #EEEEEE; 
transition: width 3s, 


height 3s, 
background-color 3s; 
—webkit-transition: width 3s, 
height 3s, 
background-color 3s; 
上 


div:hover { 


> 
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width: 150px; 
height: 150px; 
background-color: #333333; 
} 
</style> 
</head> 
<body> 
<div>gnbsp;</div> 
</body> 
</html> 


对 比 代码 3.29 和 代码 3.28， 最 明显 的 变化 是 代码 3.29 中 的 transition 属性 值 使 用 了 如 下 语 
法 : width 3s, height 3s, background-color 3s; 这 个 语法 相当 于 把 代码 3.28 中 用 于 单一 属性 的 属 
性 值 通过 去 号 连接 ， 形 成 一 个 多 重 属性 值 的 组 合 。 运 行 代码 3.29， 当 把 鼠标 移动 到 <div> 元 素 
所 在 图 形 的 上 方 时， 图形 的 宽度 、 高 度 和 颜色 同时 都 在 3 秒 钟 左右 完成 了 从 初始 状态 到 最 终 状 
态 的 渐进 演变 。 

综合 代码 3.28 和 代码 3.29， 两 段 代码 都 出 现 了 如 width 3s 这 样 的 语法 。 其实, 这 是 过 渡 效 
果 的 一 种 简写 形式 。 完 整 的 形式 可 以 同时 包含 4 个 属性 值 : 

transition: ”参与 过 渡 效 果 的 属性 名 ， 过 渡 效 果 持 续 时 间 ， 速 度 变化 ， 延 迟 ; 


代码 3.28 和 代码 3.29 都 只 用 到 了 上 述 4 个 属性 值 中 间 的 前 两 个 ， 代 码 3.30 同时 使 用 了 4 
个 属性 值 ， 分 别 代 表 4 个 过 渡 特 性 。 


代码 3.30 同时 使 用 4 个 过 渡 特 性 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Transition - Full Control</title> 


<style> 
div { 
width: 400px; 
height: 60px; 
background-color: lightGray; 
transition: height 4s ease-out 1s; 
—webkit-transition: height 4s ease-out 1s; 
| 
div:hover { 
height: 600px; 
} 
</style> 
</head> 
<body> 
<div>gnbsp;</div> 
</body> 


</html> 
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上 述 4 个 属性 值 也 可 以 依次 分 别 由 属性 transition-property、transition-duration 、transition- 
timing-function 和 transition-delay 表示 。 

其 中 ， 属 性 transition-delay 代表 延迟 。 当 属性 
transition-delay 被 设置 一 个 时 间 值 以 后 , 过 渡 效 果 不 
会 立即 发 生 ， 而 是 需要 等 待 延迟 的 时 间 结 束 ， 才 会 
开始 过 渡 效 果 。 

在 默认 情况 下 ， 过 渡 效 果 以 较 慢 的 速度 开始 ， 
中 途 加 速 ， 并 以 较 慢 的 速度 结束 。 这 样 的 速度 变化 
可 以 通过 属性 transition-timing-function 来 改变 。 属 
性 transition-timing-function 的 属性 值 的 核心 是 数学 时 间 
上 的 贝 塞 尔 曲线 (Cubic Bézier Curve， 或 译 为 贝 兹 曲 
线 )， 并 把 曲线 映射 为 过 渡 效果 以 及 下 一 小 节 将 要 介 图 3.22 CSS 中 ease 所 代表 的 贝 塞 尔 曲线 
绍 的 动画 效果 中 的 完成 进度 。 图 3.22 中 的 曲线 代表 例 同 3 汉 本 进度 下 分 由 
了 默认 状况 下 的 动画 完成 进度 规律 。 贝 塞 尔 曲线 通 
过 4 个 点 来 定义 曲线 的 几何 图 形 。CSS 3 提供 了 cubic-bezier(n,n,n,n) 方 法 ， 参 数值 需要 通过 数 
学 运算 得 到 。 除 了 通过 数学 方法 精确 定义 速度 变化 以 外 ，CSS 3 还 为 transition-timing-function 
属性 同时 预定 义 了 如 表 3.14 中 列举 的 5 个 常用 的 进度 特性 。 


表 3.14 通过 transition-timing-function 设 置 过 渡 效 果 的 进度 变化 特性 


当 洋 转 池 


默认 值 。 慢 速 开始 ， 中 途 加 速 ， 慢 速 结束 


ease-Out 


ease-in-out 慢 速 开始 ， 慢 速 结束 


3.4.4 动画 效果 


CSS 动画 效果 综合 了 前 面 介绍 的 变换 和 过 渡 效 果 ， 实 现 图 形 在 浏览 器 中 的 翻转 、 移 位 、 跳 
跃 等 动作 ， 这 些 动画 效果 能 够 取代 一 部 分 过 去 由 Flash 或 者 JavaScript 产生 的 动画 效果 。 

CSS 动画 必须 具备 以 下 几 个 要 素 : 

@ 通过 CSS 选择 器 指定 目标 元 素 。 

@ 动画 效果 的 名 称 。 

e  @keyframes 规则 。 

@ 通过 @keyframes 规则 规定 目标 元 素 的 某 一 个 (或 某 几 个 ) 属 性 的 初始 状态 和 动画 效果 

的 终止 状态 。 

代码 3.31 完成 了 一 幅 图 片 从 浏览 器 窗口 的 上 方 滑动 进入 浏览 器 , 并 且 最 终 停留 在 浏览 器 窗 
口中 的 一 个 动画 效果 。 与 过 渡 效 果 相 似 ， 首 先 需 要 通过 CSS 选择 器 ， 选 择 需要 添加 动画 效果 
的 HTML 元 素 ， 然 后 为 被 选择 的 目标 元 素 指 定 动画 名 称 。 属 性 animation-name 的 值 必须 匹配 
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-个 @keyframes 规则 ， 而 真正 的 动画 效果 都 定义 在 @keyframes 规则 中 。 代 码 3.31 中 的 
@keyframes 规则 通过 from 和 to 定义 了 动画 的 开始 和 结束 状态 。 这 段 代 码 中 ， 一 个 需要 注意 的 
地 方 ， 就 是 目前 需要 为 Chrome 浏览 器 在 @keyframes 关键 字 前 面 添加 -webkit- 前 级 。 


代码 3.31 动画 实例 - 下 拉 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Animation - SlideDown</title> 
<style> 
img { 
width: 100%; 
height: auto; 
} 


#divl { 
-webkit-animation-name: slideDown; 
-webkit-animation-duration: 10s; 
animation-name: slideDown; 
animation-duration: 10s; 


} 
@-webkit-keyframes slideDown { 
from { -webkit-transform: translateY(-100%); } 
to { -webkit-transform: translateY(0); } 
} 
@keyframes slideDown { 
from { transform: translateY(-100%); } 
to { transform: translateY(0); } 
} 
</style> 
</head> 
<body> 
<div id="divil"> 
<img src="images/whale 02.jpg" alt="killer whale"> 
</div> 
</body> 
</html> 


CSS 动画 效果 与 过 渡 效 果 中 使 用 的 很 多 属性 十 分 相像 ， 使 用 时 也 能 更 改 这 些 属性 的 
transition- 或 者 animation- 前 级 。 例 如 ， 代 码 3.32 中 使 用 的 animation-timing-function 属性 ， 它 的 
作用 与 过 渡 效 果 的 transition-timing-function 属性 的 作用 是 十 分 相近 的 。 代码 3.32 模拟 了 一 个 篮 
球 自由 落体 并 落地 弹 回 这 样 一 个 过 程 。 这 段 代码 中 的 animation-iteration-count 属性 可 以 为 动画 
效果 指定 发 生 的 次 数 ， 也 可 以 像 代 码 中 那样 指定 为 infinite， 即 无 限 循环 。 

代码 中 的 animation-timing-function 属性 值 使 用 了 CSS 中 的 cubic-bezier(n,n,n,n) 方 法 , 模拟 
了 自由 落体 中 的 加 速 过 程 。animation-direction 属性 用 于 指定 动画 效果 的 方向 特性 ， 表 3.15 列 
举 了 animation-direction 属性 的 4 个 常用 属性 值 。 由 于 该 属性 被 赋予 属性 值 altermate, 动画 在 第 
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1、3、5... 次 按照 @keyframes 规则 中 的 正常 顺序 运行 ， 而 第 2、4、6... 次 以 @keyframes 规则 所 
规定 相反 顺序 执行 ,这样 ， 当 篮球 落地 以 后 ， 从 地 面 弹 起 的 减速 效果 正好 与 第 一 次 动画 运行 时 
的 自由 落体 效果 相反 。 


表 3.15 通过 animation-direction 设 置 过 渡 效 果 的 方向 特性 


属性 值 用 法 说 明 
normal 默认 值 。 按 照 @keyframes 规则 运行 动画 过 程 
reverse 按照 @keyframes 规则 的 逆向 顺序 运行 动画 过 程 


动画 在 奇数 次 以 正常 方式 运行 ， 在 偶数 次 以 逆向 方式 运行 
动画 在 偶数 次 以 正常 方式 运行 ， 在 奇数 次 以 逆向 方式 运行 


alternate 


alternate-reverse 


代码 3.32 ”动画 实例 - 自由 落体 与 弹 回 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Animation - Bounce</title> 


<style> 
#divl { 
position: relative; 
-webkit-animation-name: bounce; 
-webkit-animation-duration: 1s7 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 


-webkit-animation-timing-function: 
cubic-bezier(0.515, 0.180, 0.900, 0.470); 


animation-name: bounce; 
animation-duration: 1s; 
animation-iteration-count: infinite; 
animation-direction: alternate; 


animation-timing-function: 
cubic-bezier(0.515, 0.180, 0.900, 0.470); 
} 
@-webkit-keyframes bounce { 
from { top: Opx; } 
to { top: 400px; } 
} 
@keyframes bounce { 
from { top: Opx; } 


to { top: 400px; } 
} 
</style> 
</head> 
<body> 


<div id="div1"> 
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<img src="images/basketbal1.jpg"” alt=" 篮 球 "> 
</div> 
</body> 
</html> 


3.5 CSS 与 输出 设备 


3.5.1 设备 类 型 简介 


随 着 技术 的 发 展 , 一 个 网 页 不 再 仅仅 是 只 能 在 桌面 浏览 器 中 输出 , 网 页 也 可 以 通过 打印 机 、 
电视 、 传 真 机 、 移 动 设备 等 输出 。 不 同 的 输出 设备 具有 不 同 的 物理 特性 ， 它 们 对 网 页 的 表现 能 
力 往往 很 不 相同 。 为 了 适应 各 种 不 同 的 输出 设备 ， 自 CSS 2 起 ， 增 加 了 媒体 类 型 (Media Type) 
功能 , 即 对 输出 设备 的 支持 。 这 样 ,一 个 网 页 可 以 根据 输出 设备 的 不 同 而 采用 不 同 的 样式 规则 ， 
使 输出 效果 达到 最 佳 。CSS 2.1 定义 了 如 下 媒体 类 型 ， 见 表 3.16。 


表 3.16 ”CSS 支持 的 媒体 类 型 


媒体 类 型 设备 说 明 


all 适用 于 所 有 设备 

braille 盲文 输出 设备 

embossed 盲文 打印 机 

handheld 手持 设备 、 移 动 设备 

print 打印 机 

projection 投影 仪 

screen 彩色 显示 器 

speech 语音 输出 设备 

ty 电 传 打 字 机 

tv 电视 机 (彩色 、 低 分 辩 率 、 具 有 声音 输出 功能 、 屏 幕 滚动 功能 有 限 ) 


CSS 对 媒体 类 型 的 支持 通过 @media 规则 实现 .@media 规则 是 针对 于 某 种 特定 输出 设备 制 
定 的 一 系列 样式 规则 的 集合 。 只 要 把 与 输出 设备 相关 的 样式 表 定 义 在 针对 某 种 输出 设备 的 
@media 规则 范围 内 ， 这 样 的 样式 表 的 使 用 范围 就 只 限于 某 种 特定 的 输出 设备 了 。 

代码 3.33 演示 了 一 个 经 典 的 针对 不 同 输出 类 型 的 设备 而 采用 不 同样 式 表 的 实例 。 


代码 3.33 ”使 用 @media 规 则 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Media Type</title> 
<style> 
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div { 
width: 100%; 
} 
-Content { 
min-height: 150px; 
background-color: lightGray; 
| 
@media screen { 
-ttLe 
height: S50px; 
background-color: black; 
color: white; 
} 
} 
@media print { 
stsEre ft 
height: SO0px; 
white; 


background-color: 
color: black; 
} 
} 
</style> 
</head> 
<body> 
<div class="title"> 标 题 </div> 
<div class="content"> 内 容 </div> 


</body> 
</html> 
这 段 代 码 在 网 页 上 分 为 两 个 区 域 : 标题 和 内 容 。 划 
是 一 致 的 , 都 是 浅 灰色 背景 、 黑 色 的 文字 , 而 这 个 网 页 
会 表现 为 不 同 的 样式 。 
当 这 个 网 页 文件 在 浏览 器 中 显示 时 ， 标 题 的 背景 色 是 黑色 ， 而 文字 是 白色 的 ， 如 图 3.23 
所 示 。 当 这 个 网 页 文件 在 打印 机 输出 时 ， 标 题 的 背景 则 采用 白色 ， 文 字 是 黑色 的 。 


中 内 容 区 的 样式 ， 在 任何 输出 设备 上 都 
文件 的 标题 部 分 ,在 不 同 的 输出 设备 上 ， 


D localhost, e 


图 3.23 通过 @media screen 指 定 标题 在 计算 机 屏幕 上 输出 的 样式 
背景 图 片 .代码 3.33 要 求 浏览 器 中 的 


月 水 


狂 注意 :很 多 浏览 器 在 打印 输出 时 会 隐藏 背景 颜色 和 
相关 设置 必须 保证 背景 颜色 能 够 被 打印 机 输出 .图 3.24 中 ,箭头 所 指 的 是 Chrome 
浏览 器 的 相关 设置 。 图 3.24 右 侧 显示 的 是 网 页 文件 的 打印 预览 。 

六 125 


国 jQuery Mobile 移 动 网 站 开发 


Margins 


Options Headers and footers 


WW Background colors and 
6 


Print using system dialog.., (Ctrl+Shift+P) 


3.24 通过 @media print 指 定 标题 在 打印 机 上 输出 的 样式 


3.5.2 ”媒体 查询 简介 


CSS 2 和 CSS 2.1 对 于 媒体 类 型 的 支持 使 不 同类 型 的 设备 获得 不 同 的 样式 特性 "。 比 如 代码 
3.33 中 ， 通 过 @media 规 则 为 计算 机 和 打印 机 设置 不 同 的 样式 风格 。 但 是 在 实际 应 用 中 ， 媒 体 
类 型 除了 screen 和 print 以 外 的 其 他 类 型 都 很 受 限制 ， 并 没有 真正 得 到 广泛 应 用 。 尤 其 是 在 手机 
等 移动 设备 方面 ， 由 于 移动 设备 之 间 的 屏幕 大 小 和 分 辩 率 差别 很 大 ， 而 且 又 可 以 垂直 或 者 水 平 
方向 放置 ， 无 法 为 所 有 的 handheld 类 型 的 设备 设计 统一 的 样式 表 ， 这 样 的 设备 物理 特性 问题 在 
CSS 3 中 的 媒体 查询 技术 下 得 到 了 极 大 的 改善 。 

媒体 查询 (Media Queries)， 目 前 还 没有 一 个 确切 的 中 文 术 语 ， 而 且 从 字面 上 也 很 难 直 接 翻 
译 ， 这 里 暂且 使 用 “媒体 查询 ”这 个 非 正式 的 名 称 。 媒 体 查 询 是 CSS 3 系列 技术 中 已 经 正式 发 
布 的 一 个 模块 ， 它 采用 了 在 HTML 4 中 保留 下 来 的 media 属性 ,然而 媒体 查询 技术 采用 了 不 同 
于 HTML 4 的 解析 规则 。 由 于 目前 HTML 5 并 没有 形成 最 终 的 版 本 ， 媒 体 查询 技术 可 以 用 在 
HTML 5 中 ， 但 是 它 并 不 针对 于 HTML 5。 

媒体 查询 技术 在 语法 上 既 可 以 通过 media 属性 定义 , 也 可 以 通过 @media 规则 或 者 @import 
规则 定义 。 而 媒体 查询 中 的 “查询 ” 则 是 由 零 或 多 个 表达 式 来 实现 的 。 查 询 的 范围 包括 屏幕 显 
示 区 的 宽度 /高 度 ( 对 于 计算 机 屏幕 和 移动 设备 中 的 浏览 器 ， 高 度 和 宽度 包含 滚动 条 )、 设 备 显示 
区 的 宽度 和 高 度 、 屏 幕 分 辨 率 、 设 备 放置 方向 等 。 

下 面 通过 两 个 实例 来 演示 媒体 查询 的 基本 使 用 方法 。 

代码 3.34 用 于 演示 对 于 屏幕 宽度 的 判断 , 并 根据 屏幕 宽度 应 用 不 同 的 样式 风格 。 代 码 中 使 
用 了 @media only screen and (max-width: 600px) 和 (@media only screen and (min-width: 600px) 两 


@ 此 处 区 分 CSS 2 和 CSS 2.1 是 因为 这 两 个 版 本 对 媒体 类 型 的 分 类 略 有 不 同 .CSS 2 中 的 aural 类 型 在 CSS 2.1 
中 被 淘汰 ， 并 被 CSS 2.1 中 的 speech 类 型 取代 。 
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组 规则 。 很 明显 ， 这 两 组 规则 都 是 针对 于 screen 类 型 输出 设备 的 ， 并 且 第 一 组 规则 适用 于 屏幕 
最 大 宽度 为 600px( 屏 幕 宽度 小 于 600px) 的 设备 , 而 第 二 组 规则 适用 于 屏幕 最 小 宽度 为 600px( 屏 
幕 宽度 大 于 600px) 的 设备 。 在 两 组 不 同 的 规则 中 ， 小 屏幕 的 导航 部 分 Qavigation) 使 用 了 样式 
clear: both; CSS 中 的 clear 属性 用 于 规定 在 当前 元 素 的 左右 两 侧 是 否 允 许 具有 float 属性 的 元 素 
存在 。clear: both; 表 示 当 前 元 素 的 左右 两 侧 不 允许 有 “浮动 ”着 的 其 他 元 素 。 

代码 3.34 在 @media 规则 中 使 用 了 only 关键 字 。only 是 一 个 可 选 的 关键 字 ， 如 果 使 用 ， 应 
该 出 现在 规则 表达 式 的 最 前 面 。only 关键 字 的 作用 ， 是 使 不 支持 媒体 查询 的 浏览 器 忽略 掉 在 媒 
体 查 询 规则 中 定义 的 样式 风格 。 

代码 3.34 ”根据 屏幕 宽度 实现 具有 自 适 应 能 力 的 网 页 布局 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Media Queries - 宽度 </title> 
<style> 
tbie l 
float: Je 
min-height: 150px; 
} 
@media only screen and (max-width: 600px) { 
.title>img { 
width: 100%; 
height: auto7 
} 
.navigation { 
clear: both; 
} 
-menu { 
background-color: lightGray; 
} 
} 
@media only screen and (min-width: 600px) { 
.title>img { 
max-width: 504px; 
height: auto7 
} 


.navigation { 


float: right; 

} 

-menu { 
background-color: white; 
border-bottom: thick solid gray; 


} 
} 
</style> 
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</head> 
<body> 
<div> 
<div> 加 拿 大 旅游 </div> 
<div> 
<div class="title"> 
<img src="images/forest.jpg" 
alt=" 森 林 (Dorset Ontario) "> 
</div> 
<div class="navigation"> 
<div class="menu"><a href="#"> 秋 季 赏 枫 </a></div> 
<div class="menu"> 文 化 古迹 </div> 
<div class="menu"> 游 乐 场 </div> 
<div class="menu"> 度 假 村 </div> 
<div class="menu"> 游 轮 </div> 
<div class="menu"> 文 化 节 </div> 
</div> 
</div> 
</div> 
</body> 
</html> 


媒体 查询 的 查询 条 件 ， 包 括 width 和 device-width 关键 字 ， 两 者 都 允许 使 用 max- 和 min- 
前 级 。 前 者 可 用 于 计算 机 浏览 器 的 应 用 环境 下 ， 当 用 户 改 变 浏览 器 窗口 的 大 小 时 ， 就 会 根据 当 


更 多 的 是 应 用 在 移动 设备 等 显示 窗口 大 小 固定 的 环境 下 。 
图 3.25 中 的 两 个 画面 ,反映 了 当 浏 览 器 窗口 大 小 改变 以 后 ， 自 动 触发 的 页 面 布局 变化 。 相 
关 的 编程 技巧 在 自 适应 的 网 页 设计 策略 中 经 常 使 用 。 


站 Media Querlss - 袖 度 
和 @ 口 localhostcHD3/media_queries_width ht 
加 拿 大 旅游 


图 3.25 通过 媒体 查询 实现 网 页 布局 和 样式 风格 自 适应 


代码 3.35 演示 了 一 个 按照 设备 放置 的 水 平 (andscape)、 垂 直 (portrait 方 向 采用 不 同 的 样式 
风格 的 实例 ,方向 性 判断 的 依据 是 输出 设备 的 宽度 和 高 度 的 比例 。 如 果 输 出 设备 是 桌面 浏览 器 ， 
用 户 随时 可 以 改变 窗口 比例 ， 进 行 模拟 测试 。 而 当 输 出 设备 是 手机 等 移动 设备 时 ， 由 于 显示 窗 
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口 的 物理 大 小 固定 (个 别 智能 手机 的 显示 窗口 也 能 随时 由 用 户 改变 )， 就 能 通过 宽度 和 高 度 的 比 
例 判断 设备 当前 的 放置 位 置 。 


代码 3.35 设备 放置 方向 性 查询 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Media Queries - 方向 </title> 
<style> 
div { 
width: 200px; 
min-height: 120px; 
} 
@media screen and (orientation: landscape) { 
-portrait { 
display: none; 
} 
.landscape { 
display: block; 
} 
i 
@media screen and (orientation: portrait) { 
portratt t 
display: block; 
} 
.landscape { 
display: none; 
} 
} 
</style> 
</head> 
<body> 
<div class="portrait"> 竖 直 放 置 </div> 
<div class="landscape"> 水 平 放 置 </ div> 
</body> 
</html> 


3.6 本 章 习 题 


1. 选择 题 (多 选 ) 
(1) ::first-paragraph 是 一 个 ( )。 

A. 伪 类 B. 伪 元 素 C. 伪 属 性 D. 以 上 都 不 对 
(2) 在 下 面 的 网 页 中 ， 哪 一 个 或 哪些 字母 显示 为 蓝 色 ? ( ) 


<!DOCTYPE html> 
<html> 
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<head> 
<meta charset="UTF-8"> 
<title>CSS Selector</title> 
<style> 
iy "div f 
color: blue; 
} 
</style> 
</head> 
<body> 
<div>A</div> 
<div> 
<div>B</div> 
<div> 
<div>C</div> 
</div> 
</div> 
</body> 
</html> 


A. A B. B 6 D.， 以 上 都 不 对 
(3) padding: 10px 20px: 与 下 列 哪 一 组 代码 作用 相同 ? (  ) 

次 5 

padding-right: 10px; 

padding-top: 20px; 


padding-left: Opx; 
padding-bottom: Opx; 


B. 


padding-right: 10px; 
padding-top: 20px; 
padding-left: 10px7 
padding-bottom: 20px; 


C: 


padding-right: 20px; 
padding-top: 10px; 
padding-left: 20px; 
padding-bottom: 10px; 


D; 


padding-right: 20px; 
padding-top: Opx; 
padding-left: 10px; 
padding-bottom: Opx; 
(4) 当 对 一 个 <div> 元 素 设置 了 如 下 样式 以 后 , 该 <div> 元 素 的 边框 (border) 将 在 浏览 器 中 显 
示 为 ( )。 
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border-width: lpx; 
border-color: red; 
A. 红色 实 线 B. 红色 虚线 C. 黑色 实 线 D. 不 显示 边框 
(5) 当 一 个 样式 规则 中 某 一 个 样式 声明 既 包 含 标准 CSS 属性 ， 也 包含 浏览 器 厂商 特有 的 
属性 时 ， 应 当 (  )。 
A， 把 WebKit 浏览 器 的 特有 属性 放 在 最 前 面 
B. 把 标准 CSS 属性 放 在 最 后 
C. 任意 顺序 
(6) 下 列 哪 一 种 方法 能 够 把 一 个 宽度 和 高 度 都 不 为 0 的 <div> 元 素 全 隐藏 (不 在 屏幕 上 留 有 
痕迹 )? (  ) 


A. visibility: hidden; B. visibility: none: 
C. display: hidden: D. display: none: 
(7) 下 列 哪 一 种 方法 是 以 浏览 器 窗口 为 参照 物 的 ?( 
A. position: static; B. position: fixed: 
C. position: relative: D. position: absolute: 
(8) 在 下 列表 达 式 中 ， 哪 一 个 (或 哪些 ) 能 够 找到 一 个 指定 元 素 的 第 一 个 子 节点 ? ( 。 “) 
A. :first-child B. :nth-last-child(1) 
Ct D. :children(1) 
2. 编程 题 


编写 一 个 网 页 ， 要 求 满足 下 列 条 件 : 

@ ” 当 网 页 在 浏览 器 中 打开 时 ， 分 别 在 浏览 器 窗口 的 最 上 方 和 最 下 方 显示 两 个 相同 高 度 
(45px) 和 宽度 (100%) 的 <div> 元 素 。 

@ ”两 个 <div> 元 素 的 高 度 (45px) 和 宽度 (100%), 以 及 显示 位 置 不 会 随 着 浏览 器 窗口 大 小 的 
改变 而 改变 。 

@ 两 个 <div> 与 浏览 器 边框 之 间 没 有 空隙 。 
在 网 页 上 部 的 <div> 元 素 中 包含 一 个 <h1> 元 素 ， 并 在 <hl> 元 素 中 显示 “Hello World”。 

@。 如果 把 上 面 的 <hl> 替 换 为 <h2> ~ <h6> 中 的 任何 一 个 元 素 ， 要 求 保持 “hello World” 字 
体 大 小 不 变 。 
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本 章 导读 : 


jQuery 是 jQuery Mobile 的 基础 ，jQuery Mobile 依赖 于 jQuery。jQuery 的 基本 
应 用 方法 同样 适用 于 jQuery Mobile 的 开发 。 

作为 学 习 jQuery Mobile 的 预备 知识 , 本 章 将 着 重 介 绍 jQuery 的 基本 编程 技巧 ， 
起 到 从 HTML 5、CSS 3 网 站 开发 向 jQuery Mobile 开发 过 渡 的 作用 。 

在 学 习 本 章 的 过 程 中 ， 读 者 需要 对 比 本 书 的 第 3 章 ， 理 解 jQuery 选择 器 在 哪 
些 方面 扩展 了 CSS 选择 器 的 功能 ， 并 且 理 解 jQuery 的 特效 和 事件 处 理 方法 ， 以 及 
网 页 加 载 过 程 中 的 时 序 问题 。 
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4.1 jQuery 的 基本 使 用 方法 


jQuery 是 一 个 小 巧 、 快 速 、 功 能 丰富 的 JavaScript 程序 库 。jQuery 通过 简单 易 用 的 API， 
能 够 使 网 页 的 HTML 文档 遍历 、 文 档 内 容 的 处 理 、 事 件 处 理 、Ajax、 动 画 等 功能 变 得 非常 容 
易 实 现 。 在 这 一 节 中 ， 我 们 将 通过 一 些 简单 的 实例 ， 使 读者 对 jQuery 的 基本 概念 有 一 个 快速 
的 了 解 ， 熟 悉 jQuery 的 基本 使 用 方法 ， 并 在 这 一 过 程 中 理解 jQuery 是 怎样 简化 一 些 通常 需要 
复杂 JavaScript 编程 才能 解决 的 问题 的 。 这 一 节 的 内 容 只 是 简要 介绍 jQuery 的 基本 工作 方式 和 
基本 编程 结构 ， 后 续 章 节 中 将 会 更 深入 地 探讨 jQuery 编程 的 各 种 技巧 。 

在 这 本 节 中 ， 我 们 将 看 到 jQuery 这 个 单词 在 不 同 的 上 下 文中 具有 不 同 的 含义 ， 它 可 能 是 
指 jQuery 系统 本 身 , 也 可 能 是 指 jQuery 系统 中 的 全 局 方法 jQuery0 和 由 此 创建 的 jQuery 对 象 ， 
还 可 能 是 指 jQuery 系统 中 jQuery 对 象 的 属性 $0.jquery。 读 者 在 阅读 本 节 时 应 注意 区 分 。 


4.1.1 jQuery 程序 的 基本 组 织 结构 


1. 加 载 jQuery 程序 库 


jQuery 是 一 个 JavaScript 程序 库 (library)， 每 一 个 使 用 jQuery 的 网 页 都 必须 加 载 jQuery 框 
架 。 在 本 书 的 实例 中 ， 能 够 经 常 看 到 下 面 这 行 代码 : 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 


这 是 在 网 页 中 加 载 外 部 JavaScript 文件 的 标准 方法 。jQuery 软件 包 下 载 以 后 ， 可 以 得 到 两 
个 JavaScript 文件 。 这 两 个 文件 的 作用 是 一 致 的 。 文 件 名 中 带 有 min 的 是 去 除 空格 和 换行 符 的 
紧凑 版 本 。 紧 凑 版 本 的 文件 比较 小 ， 使 jQuery 软件 库 的 加 载 速度 相对 比较 快 ， 适 用 于 产品 环 
境 。 在 开发 jQuery 程序 时 ， 如 果 需 要 观察 jQuery 的 调用 过 程 ， 则 可 以 考虑 选用 含有 格式 字符 
的 版 本 。 读 者 在 做 相关 编程 练习 时 ， 可 以 使 用 其 中 任何 一 个 JavaScript 文件 。 


[ 辆 说 明 : 在 本 书 的 写作 过 程 中 ，jQuery 1.1 和 2.1 已 经 发 布 。 由 于 本 书 所 采用 的 jQuery 
Mobile 1.4.2 建议 使 用 jQuery 1.10 或 者 2.0, 并 且 jQuery 2.0 与 jQuery 1.10 的 API 
是 一 致 的 ， 主 要 的 区 别 是 jQuery 从 2.0 起 不 再 支持 IE 6/7/8 等 已 经 较 少 使 用 的 浏 
览 器 ， 为 了 保持 内 容 的 一 致 性 ， 本 书 采用 jQuery 1.10。 


2. 问题 的 引出 - 网 页 加 载 过 程 中 的 时 序 问题 


-个 带 有 JavaScript 程序 的 网 页 ， 通 常 是 在 网 页 的 <head> 部 分 通过 <script> 标 签 引用 外 部 
JavaScript 文件 或 者 定义 JavaScript 程序 片段 。 

但 是 ,在 本 书 的 第 3 章 中 ,我 们 看 到 一 些 实例 中 的 JavaScript 程序 片段 被 定义 在 网 页 <body> 
部 分 的 末尾 。 这 种 <scrip 人 标签 的 使 用 方法 在 HIML 5 中 是 允许 的 ， 但 是 这 些 实例 为 什么 不 采 
用 通常 的 方法 ， 把 JavaScript 程序 片段 定义 在 <head> 部 分 中 呢 ? 

下 面 先 来 看 一 下 代码 4.1, 观察 这 段 代 码 中 的 两 个 JavaScript 程序 片段 ， 分 别 定义 在 不 同 的 
位 置 时 ， 会 对 整个 网 页 产生 什么 不 同 的 影响 。 
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代码 4.1 说 明 网 页 加 载 中 时 序 问 题 的 简单 演示 


<!DOCTYPE html> 
<html> 
<head> 
<title> 网 页 加 载 时 序 问题 </title> 
<meta charset="utf-8" /> 
eS 
xoCript> 
Var greetingDiv = document .getElementById ("greetings"); 
alert (greetingDiv.innerHTML); 
</script> 
一 -> 
</head> 
<body> 
<div id="greetings"> 你 好 ,jQuery! </div> 
ke 
<script> 
Var greetingDiv = document .getElementById("greetings"); 
alert (greetingDiv.innerHTML); 


</script> 
-> 
</body> 
</html> 
上 述 网 页 含有 两 段 注 释 ， 其 中 分 别 包 含 两 段 相 同 的 JavaScript 程序 。 如 果 首 先 去 除 附加 在 
第 一 段 JavaScript 程序 上 的 注释 ， 重 新 在 浏览 器 中 加 载 网 页 ， 结 果 可 能 与 没有 去 掉 注释 以 前 相 


比 没 有 任何 变化 。 程 序 中 的 alert0 本 应 该 弹出 一 个 警告 窗口 ， 但 是 它 并 没有 发 挥 作用 。 这 样 的 
结果 暗示 了 程序 在 运行 过 程 中 出 现 了 错误 。 如 果 把 alert(greetingDiv.innerHTML):; 改 为 
alert(greetingDiv); 重新 加 载 网 页 之 后 ， 我 们 可 以 看 到 ， 和 警告 窗口 出 现 了 ， 其 中 的 信息 是 null。 

原来 ，document.getElementById(“greetings”); 并 没有 从 网 页 中 找到 id 值 为 “greetings” 的 
HTML 元 素 。 但是， 如 果 只 去 除 附 加 在 第 二 段 JavaScript 程序 上 的 注释 ， 重 新 在 浏览 器 中 加 载 
网 页 , 网 页 会 自动 弹出 警告 框 , 并 在 警告 框 里 显示 “你 好 , jQuery! ”。 这 说 明 id 值 为 “greetings” 
的 HIML 元 素 已 经 在 JavaScript 程序 中 被 成 功 找到 。 

从 上 面 这 个 例子 中 可 以 清楚 地 看 到 ，JavaScript 程序 在 网 页 文档 中 被 定义 的 位 置 ， 能 够 影 
响 到 程序 的 实际 运行 结果 。 当 网 页 的 <head> 部 分 被 加 载 到 浏览 器 以 后 ，<head> 中 的 JavaScript 
程序 随即 执行 。 但 在 这 个 时 候 ， 网 页 中 的 <div id="“greetings”> 你 好 ，jQuery! </div> 还 没有 被 加 
载 进入 浏览 器 ， 所 以 就 出 现 了 第 一 种 情况 ， 搜 索 id- “greetings” 的 HTML 元 素 失败 。 而 当 
JavaScript 程序 被 定义 在 <body> 部 分 的 末尾 时 ，<div id=“greetings”> 你 好 ，jQuery! </div> 已 经 
先 于 JavaScript 程序 被 加 载 ,因此 在 第 二 种 情况 下 ,JavaScript 程序 顺利 找到 了 id 值 为 "greetings” 
的 HTML 元 素 ， 并 且 成 功 获取 了 这 个 元 素 的 内 容 。 

上 述 实例 演示 了 网 页 中 的 HTML 内 容 和 网 页 中 的 JavaScript 程 序 在 浏览 器 加 载 过 程 中 的 时 
间 顺 序 , 同时 说 明了 JavaScript 程序 中 的 一 些 功能 必须 在 网 页 中 HIML 内 容 被 浏览 器 加 载 以 后 
才能 运行 的 重要 性 。 为 了 实现 这 个 目的 ， 把 JavaScript 代码 片段 定义 在 <body> 的 末尾 ， 就 是 为 
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了 实现 这 个 目的 的 方法 之 一 。JavaScript 还 有 其 他 编程 技巧 ， 比 如 使 用 window.onload 就 是 另外 
-个 选项 。 但 是 第 二 个 选项 有 一 个 难以 解决 的 问题 ， 当 网 页 还 需要 加 载 如 图 片 等 资源 文件 时 ， 
这 个 选项 要 等 到 外 部 资源 文件 全 部 加 载 以 后 ， 才 能 处 理 网 页 中 的 JavaScript 程序 ， 而 不 是 在 网 
页 文档 加 载 以 后 立即 运行 。 这 个 方案 会 造成 JavaScript 程序 运行 延迟 。 幸 运 的 是 ，jQuery 已 经 

很 好 地 解决 了 这 个 问题 。 利 用 jQuery， 可 以 把 代码 4.1 改写 为 代码 4.2 的 形式 。 


代码 4.2 ”在 jQuery 中 处 理 网 页 加 载 的 时 序 问 题 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery 网 页 加 载 时 序 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
jQuery (document) .ready (function() { 
alert (jQuery ("#greetings") .text()); 
DD); 
</script> 
</head> 
<body> 
<div id="greetings"> 你 好 ，jQuery! </div> 
</body> 
</html> 


代码 4.2 使 用 了 jQuery， 并 通过 jQuery(document).ready(function() { .… }); 这 样 的 结构 ， 让 
定义 在 ready0 方 法 中 的 JavaScript 程序 在 网 页 文档 被 浏览 器 加 载 后 立即 运行 。 这 样 ， 不 论 
JavaScript 程序 定义 在 <head> 还 是 <body> 部 分 ， 网 页 文档 的 加 载 状 态 由 jQuery 负责 ， 程 序 员 就 
不 必 再 为 加 载 时 序 问 题 操 心 了 。 

3.jQuery 的 典型 语法 结构 

在 上 一 单元 中 ， 我 们 看 到 了 使 用 jQuery 过 程 中 的 一 个 基本 的 应 用 结构 : 


jQuery (document) .ready (function() { 


Ds; 


这 个 结构 由 3 个 部 分 组 成 : 
® jQuery( 方 法 。 


@ 选择 器 。 
e@ 一段 对 应 于 被 选择 的 HTML 元 素 的 事件 处 理 程序 或 者 jQuery 预先 定义 的 动作 ， 例 如 
hideO。 


jQuery0 是 整个 jQuery 体系 的 核心 ， 一 个 全 局 性 的 方法 ， 所 有 的 jQuery 操作 都 在 jQuery0 
方法 中 进行 。jQuery 系统 为 方法 名 jQuery 定义 了 一 个 别名 “$”， 使 编程 过 程 中 不 至 于 出 现 过 
多 的 “jQuery”， 便 于 程序 阅读 和 维护 。 当 使 用 “$” 替 换代 码 4.2 中 的 “jQuery” 以 后 ， 就 形 
成 了 代码 4.3， 这 就 是 我 们 经 常见 到 在 网 页 中 的 jQuery 程序 的 典型 书写 格式 。 
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代码 4.3 使 用 $ 简 化 jQuery 程序 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery 网 页 加 载 时 序 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
alert ($("#greetings") .text ()); 
DD); 
</script> 
</head> 
<body> 
<div id="greetings"> 你 好 ， jQuery! </div> 
</body> 
</html> 


代码 4.2 和 代码 4.3 完全 等 价 。 由 于 ready0 在 jQuery 中 的 特殊 性 ， 它 还 有 一 个 更 为 简短 的 
形式 。 代 码 4.3 中 的 粗 体 字 部 分 可 以 改写 如 下 ， 代 码 的 含义 没有 任何 改变 : 
$(function() { 
alert ($ ("#greetings") .text ()); 
j 
从 代码 4.3 中 可 以 看 到 ，jQuery 程序 组 织 结构 中 ， 另 外 两 个 部 分 选择 器 和 事件 处 理 程序 可 
以 嵌 套 出 现 。 关 于 jQuery 选择 器 和 事件 处 理 ， 本 章 将 陆续 详细 介绍 。 


4.1.2 jQuery 的 属性 


在 jQuery 中 , 有 两 种 jQuery 系统 属性 (properties): 通过 jQuery0 创 建 的 jQuery 对 象 的 属性 
和 jQuery 全 局 属性 。 在 一 段 程序 中 很 容易 识别 这 两 类 属性 。jQuery 对 象 的 属性 首先 需要 实例 
化 jQuery 对 象 , 这 个 步骤 与 在 其 他 面向 对 象 的 编程 中 基本 一 致 。 在 jQuery 中 , 通过 jQuery0( 或 
者 SO0， 两 者 含义 相同 )， 或 者 通过 类 似 $(s#greetings”) 等 的 方法 获得 jQuery 对 象 。 使 用 jQuery 
全 局 属性 则 不 需要 首先 获得 一 个 jQuery 对 象 。 

我 们 已 经 提 到 了 几 次 “jQuery 对 象 ”这 个 概念 。 初 次 接触 jQuery 的 程序 员 经 常 把 jQuery 
对 象 等 同 于 DOM 对 象 。 实 际 上 ，jQuery 对 象 比 DOM 对 象 复杂 得 多 。 它 除了 具有 DOM 的 特 
性 外 ， 还 包含 了 处 理 浏 览 器 兼容 性 和 简化 编程 的 功能 。 

jQuery 中 的 这 两 组 属性 在 网 页 设计 中 通常 不 直接 使 用 ， 而 且 其 中 的 一 些 属性 的 目的 是 为 
jQuery 系统 内 部 使 用 , 但是， 了解 这 些 系统 属性 对 于 调试 和 分 析 某 些 程序 中 的 疑难 问题 还 是 很 
有 帮助 的 。 下 面 介绍 其 中 几 个 属性 的 经 典 使 用 方法 。 


1.jquery 
jquery 属性 用 于 获取 当前 正在 使 用 中 的 jQuery 系统 的 版 本 。 它 是 jQuery 对 象 的 一 个 属性 。 
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在 使 用 这 个 属性 之 前 ， 需 要 获得 jQuery 对 象 。 
代码 4.4 演示 了 jquery 属性 的 使 用 方法 : $0.jquery; 在 浏览 器 中 运行 这 个 网 页 ， 就 能 够 在 
网 页 上 看 到 正在 使 用 中 的 jQuery 系统 的 版 本 号 。 


代码 4.4 通过 $()jquery; 获 取 jQuery 系 统 的 版 本 号 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery 属性 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
var jqVer = $() .jquery; 
$ ("#info") .text ("您 正在 使 用 jQuery " + jqver); 
Ds; 
</script> 
</head> 
<body> 
<div id="info"></div> 
</body> 
</html> 


2. length 


通过 jQuery 选择 器 可 以 得 到 一 个 包含 所 有 被 选择 的 HTML 元 素 的 jQuery 对 象 。length 属 
性 代表 了 一 个 jQuery 对 象 中 元 素 的 个 数 。 它 是 jQuery 对 象 的 一 个 属性 。 在 使 用 这 个 属性 前 ， 
需要 首先 获得 jQuery 对 象 。 代 码 4.5 演示 了 length 属性 的 使 用 方法 。 


代码 4.5 ”通过 length 属 性 读 取 按照 jQuery 选择 器 规则 返回 的 元 素 个 数 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery 属性 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
var count = $(".myBlock") .length; 
$ ("#info") .text ("这 个 网 页 中 含有 "+ count 
+ "个 具有 css 类 ‘myBlock” 的 <div> 元 素 。"); 
1) 


</script> 
<style> 
.myBlock { 
width: 100px; 
height: 20px; 
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background-color: yellow; 
} 
</style> 
</head> 
<body> 
<div id="info"></div> 
<div class="myBlock">DIV 1</div> 
<div class="myBlock">DIV 2</div> 
</body> 
</html> 


3. jquery .fx.off 


jquery. 人 x.off 是 一 个 全 局 属性 ， 它 不 需要 事先 获得 一 个 jQuery 对 象 。 在 使 用 时 ， 这 个 属性 
经 常 被 简写 为 $. 人 x.off， 含 义 是 禁止 所 有 的 动画 特效 。 它 只 两 个 属性 值 ， 即 true 和 false。true 表 
示 禁 止 所 有 的 动画 特效 ，false 表示 人 允许 动画 特效 。 代 码 4.6 演示 了 $. 人 .off 属性 的 用 法 。 


代码 4.6 通过 jQuery 全 局 属性 配置 动画 特效 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery 属性 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
$("#enableAnimation") .click (function() { 
$.fx.off = false; 
]) 7 
$("#disableAnimation") .click(function() { 
$.fx.0ff = true; 
]) 
$("#action") .click(function() { 
$ ("#whale") .slideToggle (); 
Ds; 
Ds; 
</script> 
</head> 
<body> 
<button id="enableAnimation"> 人 允许 动画 特效 </button> 
<button id="disableAnimation"> 禁 止 动画 特效 </button> 
<button id="action"> 动 画 </button> 
<hr> 
<img id="whale" src="images/whale 01.jpg" alt=" 鲸 " 
width="504" height="376"> 
</body> 
</html> 
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当 $. 人 -off 属性 的 属性 值 被 改变 以 后 ， 新 的 配置 立即 生效 。 因 此 ， 当 我 们 运行 代码 4.6， 并 
且 按 下 “禁止 动画 特效 ”或 者 “允许 动画 特效 ”按钮 以 后 ， 再 按 下 “动画 ”按钮 ， 就 能 够 分 别 
看 到 图 片 的 显示 /隐藏 ， 或 者 下 拉 / 上 移 (动画 ) 两 种 不 同 的 显示 效果 。 


4.2 jQuery 选择 器 


jQuery 选择 器 在 程序 中 用 法 十 分 简单 ， 它 的 基本 格式 是 ，$(“ 选 择 器 ”)。jQuery 选择 器 来 源 
于 CSS 选择 器 ， 同 时 又 添加 了 相当 多 的 选择 方法 ， 使 jQuery 选择 器 的 功能 非常 强大 。jQuery 
选择 器 具有 相当 繁杂 的 分 类 。 有 些 类 别 又 可 细 分 出 许多 子 类 别 ， 比 如 过 滤器 中 包括 了 基本 过 滤 
器 、 内 容 过 滤器 、 子 元 素 过 滤器 ， 以 及 可 见 性 过 滤器 等 ， 我 们 很 难 在 有 限 的 篇 幅 中 介绍 这 么 多 
jQuery 选择 器 的 编程 技巧 。 这 一 节 将 介绍 jQuery 中 一 些 常见 的 ， 并 且 在 jQuery Mobile 开发 中 
也 会 经 常 使 用 到 的 选择 器 。 


4.2.1 基本 选择 器 


1. 元 素 选 择 器 


本 书 第 3 章 中 的 实例 代码 3.5 演示 了 如 何 通过 CSS 元 素 选 择 器 ， 分 别 把 样式 赋予 <div> 和 
<span> 元 素 。jQuery 元 素 选择 器 的 语法 与 CSS 元 素 选择 器 的 语法 是 一 致 的 ， 都 是 直接 引用 元 
素 标签 。 代 码 4.7 的 显示 效果 与 代码 3.5 的 显示 效果 完全 一 致 。 但 是 这 两 段 代 码 的 实现 原理 不 
同 。 由 于 代码 4.7 使 用 了 jQuery，HTML 元 素 的 样式 是 在 HTML 文档 在 浏览 器 中 被 加 载 以 后 ， 
才 由 JavaScript 程序 添加 的 。 

代码 4.7 通过 jQuery 选择 器 为 HTML 元 素 添加 样式 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jQuery Selector - Type</title> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
$ ("div") .css ("background-color", "#EEEEEE"); 
$("span") .css ("background-color", "#AAAAAA"); 
]) 
</script> 
</head> 
<body> 
<div>div 1</div> 
<div> 
div 2 
<span>div 2 - span 1</span> 
</div> 


140 < 


第 4 章 jQuery TI 门 


<div> 
<span>div 3 - span 1</span>gnbsp;é&nbsp; 
<span>div 3 - span 2</span> 
</div> 
</body> 
</html> 


2. ID 选 择 器 和 类 选择 器 


jQuery 中 的 ID 选择 器 和 类 选择 器 所 使 用 的 语法 与 CSS 中 相应 的 语法 是 一 致 的 ， 都 是 由 前 
级 “#” 代 表 一 个 与 HTML 元 素 的 id 属性 值 相 匹配 的 选择 器 ， 由 前 级 “.” 代 表 与 HTML 元 素 
的 class 属性 值 相 匹配 的 选择 器 。 相 应 HTML 代码 片段 为 : 

<div class="greetings"> 

<div id="hello">Hello World!</div> 

</div> 

通过 $(“.greetings”) 和 $(“#hello”) 分 别 选 择 拥有 greetings 类 和 id 值 hello 的 两 个 元 素 。 这 里 ， 
#hello 是 jQuery 的 ID 选择 器 ， 它 被 包含 在 jQuery 方法 调用 30 中 。 

3. 多 重 选择 器 

jQuery 是 一 组 由 逗号 “,” 分 隔 的 选择 器 ， 其 中 每 一 个 成 员 选择 器 可 以 是 ID 选择 器 ， 或 者 
是 CSS 类 选择 器 ， 也 可 以 是 其 他 更 为 复杂 的 选择 器 。 每 一 个 选择 器 不 依赖 于 其 他 选择 器 。 多 
重 选 择 器 的 选择 结果 ， 相 当 于 是 每 一 个 选择 器 选择 结果 的 并 集 。 

下 面 的 表达 式 中 有 3 个 并 列 的 选择 器 ,分别 代表 选择 所 有 的 <span> 元 素 ,选择 含有 greetings 
类 的 <div> 元 素 ， 选 择 拥 有 id 属性 值 为 myButton 的 元 素 : 

$("span, div.greetings, #myButton") 


这 个 jQuery 多 重 选择 器 的 选择 结果 是 这 3 个 选择 器 单独 选择 后 结果 的 组 合 。 
4.2.2 ”属性 选择 器 


CSS 已 经 定义 了 大 量 与 HTML 元 素 的 属性 值 相 关 的 选择 器 ， 但 是 ， 这 些 选择 器 在 旧版 的 
浏览 器 中 极 有 可 能 缺少 足够 的 支持 ， 使 CSS 选择 器 不 能 按照 预想 的 方式 工作 。jQuery 扩展 了 
CSS 中 的 属性 选择 器 ， 并 且 提 高 了 属性 选择 器 跨 浏览 器 的 支持 度 。 属 性 选择 器 的 表达 式 包含 在 

-对 方 括号 0] 中 。 表 4.1 列举 了 jQuery 1.10 中 的 所 有 的 属性 选择 器 表达 式 及 其 含义 。 


表 4.1 属性 选择 器 的 表达 式 及 其 含义 


选择 器 的 表达 式 说 明 
[属性 名 ] 选择 所 有 拥有 指定 属性 名 的 HTML 元 素 
[属性 名 一 字符 串 "] | 选择 所 有 拥有 指定 属性 名 的 HTML 元 素 ， 并 且 属 性 值 与 指定 的 字符 串 相 符 
[属性 名 !=“ 字 符 串 选择 个 扣 有 指定 的 属性 ， 或 者 拥有 指定 的 属性 ， 但 是 属性 值 与 指定 的 字符 串 
不 相符 的 HTML 元 素 
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续 表 
选择 器 的 表达 式 说 明 
[属性 名 ^=“ 字 符 串 ] 选择 所 有 拥有 指定 的 属性 ， 并 且 属 性 值 是 以 指定 的 字符 串 开头 的 元 素 
[属性 名 $=" 字符 串 ”] 选择 所 有 拥有 指定 的 属性 ， 并 且 属 性 值 是 以 指定 的 字符 串 结尾 的 HTML 元 素 


[属性 名 *="“ 字 符 串 ] 选择 所 有 拥有 指定 的 属性 ， 并 且 指 定 的 字符 串 是 属性 值 的 一 部 分 的 HTML 元 素 
选择 所 有 拥有 指定 的 属性 ， 并 且 指 定 的 字符 串 是 属性 值 的 一 个 由 空格 分 隔 的 
单词 的 HTML 元 素 

选择 所 有 拥有 指定 的 属性 的 HTML 元 素 ， 属 性 值 或 许 与 指定 的 字符 串 匹 配 ， 
或 许 由 指定 的 字符 串 加 上 连接 符 “-” 开 始 


[属性 名 ~=" 字 符 串 ] 


[属性 名 上 “字符 串 "] 


[属性 名 1=" 字 符 串 1”] 
属性 名 2= 字 符 串 2” 


代码 4.8 演示 了 jQuery 中 属性 选择 器 的 一 种 用 法 。 
代码 4.8 通过 jQuery 属性 选择 器 为 特定 的 HTML 元 素 添加 样式 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jQuery Selector - Type</title> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 


多 重 属性 选择 器 。 被 选择 的 HTML 元 素 必须 满足 所 有 的 属性 选择 条 件 


$ (document) .ready (function() { 
$ ("input[required]") .css ("background-color", "yellow"); 
1D); 
</script> 
</head> 
<body> 
<form name="register" method="post" action="#"> 
<label for="customer"> 顾 客 : </label> 
<input name="customer" id="customer" required><br> 
<label for="email"> 电 子 邮 件 : </label> 
<input name="email" id="email" required><br> 
<label for="phone"> 电 话 : </label> 
<input name="phone" id="phone" required><br> 
<label for="address"> 地 址 : </label> 
<input name="address" id="address"><br> 
<input type="submit" value=" 注 册 "> 
</form> 
</body> 
</html> 


input[required] 表 示 选 择 所 有 <input> 元 素 中 带 有 属性 required 的 元 素 ，required 属性 的 属性 
值 并 不 作为 选择 的 依据 。 当 选择 表达 式 input[required] 被 用 于 SO 以 后 ，jQuery 就 会 返回 一 个 包 
含 所 有 被 选择 元 素 的 jQuery 对 象 .对 所 有 被 选择 元 素 添加 CSS 样式 由 jQuery 的 css0 方 法 实现 。 
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4.2.3 ”过 滤器 

过 滤器 是 jQuery 选择 器 中 比较 复杂 的 一 个 类 别 ， 下 面 介 绍 基本 过 滤器 、 内 容 过 滤器 、 子 
元 素 过 滤器 这 3 个 子 类 别 中 比较 常用 的 过 滤器 。 

1. 基本 过 滤器 

通过 jQuery 选择 器 返回 的 jQuery 对 象 包含 了 一 系列 被 选择 的 HTML 元 素 ， 这 些 元 素 具 有 
以 0 开始 的 索引 值 。 

基本 过 滤器 的 一 个 基本 用 法 ， 与 通过 jQuery 选择 器 返回 的 jQuery 对 象 中 所 包含 的 被 选择 
的 元 素 的 排序 有 关 。 另 外 ， 基 本 过 滤器 也 带 有 一 些 简 单 的 逻辑 运算 功能 。 表 4.2 列举 了 常用 的 
基本 过 滤器 。 

表 4.2 常用 的 基本 过 滤器 及 其 含义 


过 滤器 说 明 
:eq0 
:gtO 与 索引 值 相 关 的 过 滤器 。 分 别 选择 等 于 、 大 于 ， 或 者 小 于 指定 索引 值 的 HTML 元 素 


与 索引 值 相关 的 过 滤器 。 分 别 选 择 索引 值 为 偶数 或 者 奇数 的 HTML 元 素 


:odd 

:fir 

对 象 jQuery 所 包含 的 HTML 元 素 中 ， 分 别 选择 第 一 个 ， 或 者 最 后 一 个 元 素 
:lasi 

2not 其 参数 是 一 个 jQuery 选择 器 。 将 选择 与 参数 中 选择 器 不 能 成 功 匹 配 的 元 素 
:header 选择 <hl> ~ <h6> 

:root 文档 的 根 元 素 。 在 HTML 文档 中 ， 根 元 素 是 指 <html> 


3 注意 : :odd 和 :even 过 滤器 选择 元 素 索 引 值 分 别 为 奇数 和 偶数 的 HTML 对 象 。 这 里 的 奇 
数 和 偶数 ， 是 指 元 素 在 jQuery 队列 中 的 索引 值 。 由 于 索引 值 以 0 为 起 点 ， 索 引 
值 为 1 的 元 素 实 际 上 是 在 全 部 返回 的 HTML 元 素 中 排 在 第 二 位 ， 在 视觉 上 处 于 
偶数 位 置 。 
代码 4.9 演示 了 6 种 基本 过 滤器 的 用 法 ， 包 括 选 择 第 一 个 元 素 、 最 后 一 个 元 素 ， 所 有 奇数 
位 置 的 元 素 ， 所 有 偶数 位 置 的 元 素 ， 索 引 值 大 于 指定 值 的 元 素 ， 以 及 所 有 <hl> ~ <h6> 这 一 类 
的 元 素 。 


代码 4.9 利用 基本 过 滤器 对 jQuery 对 象 中 的 元 素 按照 索引 值 再 次 进行 选择 
<!DOCTYPE html> 
<htm1> 

<head> 


<meta charset="UTF-8"> 
<title>jQuery Selector - Basic Filter</title> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
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<style> 
div>div { 
width: 60PK7 
float: lefty 


border-style: solid; 
border-width: lpx; 
text-align: center; 
</style> 
<script> 
$ (document) .ready (function() { 
// 为 第 一 个 和 最 后 一 个 元 素 添加 背景 色 
$("#test1l>div:Eirst") 
-Css ("background-color"，"1ightGreen") 7 
$("#testl>div:last") 
.Css ("background-color", "lightPink"); 
// 设置 索引 值 为 奇数 的 元 素 的 背景 色 为 浅 蓝 ， 
// 索引 值 为 偶数 的 元 素 的 背景 色 为 橄榄 色 
$("#test2>div:odd") 
.Css ("background-color", "lightBlue"); 
$ ("#test2>div:even") .css ("background-color", "olive"); 
// 为 索引 值 大 于 3 的 元 素 添加 背景 色 
$("#test3>div:gt(3)") .css("background-color"，"gold") 7 
// 设置 ch1> ~ <h6> 元 素 
$(":header") .css ("color", "blue"); 
Ds; 
</script> 
</head> 
<body> 
<hl>h1l</h1l> 
<div id="testl"> 
<div>0</div><div>1</div><div>2</div><div>3</div><div>4</div> 
<div>5</div><div>6</div><div>7</div><div>8</div><div>9</div> 
</div> <br> 
<h2>h2</h2> 
<div id="test2"> 
<div>0</div><div>1</div><div>2</div><div>3</div><div>4</div> 
<div>5</div><div>6</div><div>7</div><div>8</div><div>9</div> 
</div> <br> 
<h3>h3</h3> 
<div id="test3"> 
<div>0</div><div>1</div><div>2</div><div>3</div><div>4</div> 
<div>5</div><div>6</div><div>7</div><div>8</div><div>9</div> 
</div> 
</body> 
</html> 


在 这 段 代码 中 ，jQuery 选择 器 表达 式 实际 上 是 混合 使 用 了 CSS 组 合 选择 器 的 语法 (参见 本 
书 第 3 章 ， 第 3.2.4 小 节 )。 例 如 ， 表 达 式 #test2>div:even 的 含义 是 指 id 值 为 “test2” 的 元 素 的 所 
有 直接 子 元 素 <div> 中 ， 索 引 值 序号 为 偶数 的 所 有 元 素 。 
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图 4.1 表现 了 代码 4.9 中 的 基本 过 滤器 的 实际 作用 。 


EL IT [3T4T55T5T7 Ta FE 


h2 
EN 1 EH 7 


h3 


图 4.1 元 素 索 引 值 与 基本 过 滤器 的 作用 
图 中 的 3 行 <div> 元 素 分 别 演示 了 6 个 基本 过 滤器 的 3 种 用 法 。 这 6 个 过 滤器 中 的 前 5 个 ， 
比如 #test2>div， 都 能 够 通过 一 个 jQuery 对 象 返回 整个 一 行 元 素 。 所 有 返回 的 被 选择 的 元 素 已 
经 在 jQuery 对 象 中 有 了 一 个 固定 的 索引 值 。 索 引 值 不 会 随 着 网 页 内 容 的 动态 变化 而 发 生 改变 。 
基本 过 滤器 依附 在 前 面 的 选择 器 表达 式 之 上 , 仅仅 是 在 返回 的 结果 集中 进行 进一步 筛选 。 图 4.1 
中 的 每 一 个 方 框 所 代表 的 <div> 元 素 中 都 有 一 个 数字 ， 这 个 数字 表示 当前 <div> 元 素 在 整个 一 行 
元 素 中 的 索引 值 。 前 面 已 经 特别 指出 ， 元 素 的 索引 值 在 jQuery 对 象 中 是 以 0 开始 的 ， 而 不 是 


以 1 开始 的 。 在 实际 开发 中 ， 有 关 奇 数位 置 和 偶数 位 置 是 经 常 产生 混淆 的 地 方 ， 可 对 照 程序 代 
码 和 实际 演示 效果 仔细 观察 过 滤器 的 筛选 效果 。 


2. 子 元 素 过 滤器 


有 了 CSS 选择 器 和 jQuery 基本 过 滤器 的 编程 经 验 , 子 元 素 过 滤器 就 变 得 非常 容易 理解 了 。 
子 元 素 过 滤器 的 基本 用 法 ， 是 在 一 个 元 素 的 子 元 素 中 ， 按 照 元 素 所 在 位 置 的 索引 值 ， 或 者 子 元 
素 所 属 的 元 素 类 别 ， 进 行进 一 步 的 过 滤 。 常 用 的 子 元 素 过 滤器 及 其 含义 如 表 4.3 所 示 。 
表 4.3 常用 的 子 元 素 过 滤器 及 其 含义 


过 滤器 说 明 
ee 选择 的 元 素 必 须 是 父 元 素 的 第 一 个 或 者 最 后 一 个 子 元 素 
:last-child 
eo 分 别 选择 第 个 子 元 素 或 者 倒数 第 n 个 子 元 素 
:nth-last-childO 
全 分 别 选 择 第 一 个 或 者 最 后 一 个 指定 类 型 的 子 元 素 
:last-of-type 
:nth-of-typeO 

分 别 选择 第 个 或 者 倒数 第 n 个 指定 类 型 的 子 元 素 

:nth-last-of-typet 
ee 被 选择 的 子 元 素 或 者 指定 类 型 的 子 元 素 ， 必 须 是 其 父 元 素 的 唯一 子 元 素 
:only-of-type 
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子 元 素 过 滤器 和 基本 过 滤器 一 样 ， 都 使 用 了 元 素 的 索引 值 。 但 是 ， 在 子 元 素 过 滤 
器 中 ， 元 素 的 索引 值 是 按照 :nth 计算 的 。jQuery 使 :nth 的 计算 方法 严格 遵循 CSS 
中 有 关 索 引 值 的 惯例 ， 且 索引 值 从 1 开始 计算 。 因 此 ， 子 元 素 过 滤器 中 索引 值 的 
计算 方法 与 基本 过 滤器 不 同 , 子 元 素 过 滤器 对 于 元 素 在 奇数 和 偶数 位 置 的 处 理 方 


式 ， 符 合 我 们 的 日 常 习惯 。 


从 表 4.3 中 可 以 看 到 ， 子 元 素 过 滤器 的 很 多 功能 ， 非 常 类 似 于 XPath 表达 式 的 选择 功能 ， 
这 些 功能 在 CSS 选择 器 中 并 不 存在 ，jQuery 在 相关 方面 大 大 强化 了 选择 器 的 处 理 能 力 。 有 关 
子 元 素 选 择 器 对 于 索引 值 的 不 同 处 理 方式 ， 可 以 通过 代码 4.10 来 加 以 验证 。 


代码 4.10 ”用 子 元 素 过 滤器 对 jQuery 对 象 中 的 元 素 按 索引 值 及 元 素 类 型 再 次 进行 选择 


<!DOCTYPE html> 


<html> 
<head> 


<meta charset="UTF-8"> 
<title>jQuery Selector - Child Filter</title> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 


<style> 


div>div, span { 
display: block; 
width: G60px; 
float: left; 


} 


border-style: solid; 
border-width: lpx; 
text-align: centers 


</style> 
<script> 


$ (document) .ready (function() { 


// 为 父 元 素 第 一 个 子 元 素 (<div> 类 型 ) 和 最 后 一 个 出 现 
// 的 子 元 素 (<span> 类 型 ) 添加 背景 色 
$("#test1l>div:first-child") 
.Css("background-color", "lightGreen"); 
$ ("#test1>span: first-child") 
.Css("background-color", "red"); 
$("#test1>span:1ast-of-type") 
.Css("background-color", "lightPink"); 
// 设置 第 一 个 子 元 素 的 背景 色 为 浅 蓝 ， 
// 第 三 个 <span> 子 元 素 的 背景 色 为 橄榄 色 
$("#test2>div:nth-child(1)") 
-Css ("background-color"，"1ightBlue") 7 
$("#test2>span:nth-of-type(3)") 
.Css("background-color™", "olive"); 
// 设置 索引 值 为 偶数 的 <aiv> 子 元 素 的 背景 色 为 金黄 色 
$ ("#test3>div:nth-child (even) ") 


-Css ("background-color", "gold"); 
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</script> 
</head> 
<body> 
<div id="testl"> 
<div>1-div</div><div>2-div</div><div>3-div</div> 
<span>4-span</span><span>5-span</span><span>6-span</span> 
<div>7-div</div><div>8-div</div><div>9-div</div> 
</div> 
<br><br> 
<div id="test2"> 
<div>1-div</div><div>2-div</div><div>3-div</div> 
<span>4-span</span><span>5-span</span><span>6-span</span> 
<div>7-div</div><div>8-div</div><div>9-div</div> 
</div> 
<br><br> 
<div id="test3"> 
<div>1-div</div><div>2-div</div><div>3-div</div> 
<span>4-span</span><span>5-span</span><span>6-span</span> 
<div>7-div</div><div>8-div</div><div>9-div</div> 
</div> 
</body> 
</html> 


代码 4.10 的 实际 显示 效果 如 图 4.2 所 示 。 


jQuery Selector - Chid Fiter x 
€ © DB localhost/CHO4 


| 2- | i 7-dv | -dv 9-div 


2-dv | 3-dv [4-span [ 5-span ON 7-dr | 3-dv | -dv 
Lav | 3-dv | 4-span [ 5-span [ 6-span [ 7-dr | -dv 


4.2 子 元 素 过 滤器 对 于 元 素 索 引 值 的 处 理 方式 


以 代码 4.10 中 第 一 个 子 元 素 过 滤器 表达 式 为 例 ,#testl>div:first-child 的 含义 是 指 在 id 值 为 
#testl 的 元 素 的 所 有 直接 子 元 素 中 ， 找 到 第 一 个 子 元 素 并 且 元 素 类 型 是 <div>。 在 图 4.2 的 第 一 
行 元 素 中 ， 我 们 能 够 看 到 第 一 个 元 素 被 添加 了 浅 绿色 背景 ， 表 示 以 上 选择 表达 式 成 功 匹 配 了 相 
应 的 子 元 素 。 代 码 4.2 中 的 第 三 个 表达 式 $(“#test1>span:last-of-type”) 是 指 在 id 值 为 “#test1” 的 
元 素 的 所 有 直接 子 元 素 中 ， 找 到 最 后 一 次 出 现 的 <span> 子 元 素 。 在 图 4.2 中 ， 我 们 能 够 在 第 一 
行 元 素 中 看 到 背景 色 被 设置 为 浅 粉红 的 元 素 ， 表 示 这 个 表达 式 也 能 够 成 功 匹 配 。 但 是 图 4.2 的 
第 一 行 元 素 中 ， 没 有 出 现 背 景色 被 设置 为 红色 的 元 素 。 这 个 结果 表示 代码 中 的 第 二 个 表达 式 
$(Cs#testl>span:first-child7) 没 有 成 功 匹配 任何 子 元 素 。 过 滤器 :first-child 在 这 个 表达 式 中 的 含义 
是 指 在 id 值 为 “#testl ”的 元 素 的 所 有 直接 子 元素 中 ， 查 找 <span> 元 素 ， 并 且 这 个 元 素 是 其 父 
元 素 的 第 一 个 子 元 素 。 虽 然 该 行 代码 中 有 三 个 <span> 元 素 ， 但 是 它们 并 不 是 父 元素 的 第 一 个 子 
元 素 ， 因 此 无 法 成 功 匹 配 。 这 一 组 三 个 表达 式 ， 解 释 了 一 个 指定 类 型 的 第 一 次 出 现 的 子 元 素 和 
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-个 指定 类 型 并 且 是 第 一 个 子 元 素 的 区 别 。 
在 使 用 子 元 素 过 滤器 的 时 候 ， 必 须 注意 到 这 一 类 过 滤器 使 用 的 索引 值 是 以 1 开始 的 。 过 滤 
器 nth-child0 中 的 参数 可 以 使 用 整数 索引 值 ， 也 可 以 使 用 odd 或 者 even， 分 别 代表 在 子 元 素 集 
合 中 的 奇数 和 偶数 位 置 。 
从 上 述 实例 中 可 以 看 到 ，:first-child 和 :nth-child(1) 的 实际 作用 是 一 致 的 。 


3. 内 容 过 滤器 
在 jQuery 1.10 中 ， 一 共有 4 种 内 容 过 滤器 。 内 容 过 滤器 与 HTML 元 素 中 的 内 容 相 关 。 
个 HTML 元 素 的 内 容 ， 既 可 以 指 一 个 元 素 所 包含 的 文本 内 容 ， 也 可 以 指 一 个 元 素 所 包含 的 子 
元 素 及 所 有 的 后 代 元 素 。 表 4.4 列举 了 这 4 种 内 容 过 滤器 的 含义 。 
表 4.4 内 容 过 滤器 及 其 含义 
说 明 
参数 为 一 个 字符 串 。 所 有 包含 指定 的 字符 串 内 容 的 元 素 将 被 选择 
参数 为 一 个 选择 器 。 该 过 滤器 返回 的 元 素 将 至 少 包 含 一 个 由 选择 器 参数 所 返回 的 元 素 
选择 所 有 不 包含 子 节点 (包括 文本 节点 ) 的 元 素 
被 选择 的 元 素 至 少 含有 一 个 节点 (元 素 节 点 或 者 文本 节点 ) 


表 4.4 中 ， 过 滤器 说 明 使 用 了 “节点 ”这 一 概念 。 这 个 概念 通常 用 在 与 XML 有 关 的 XPath 
或 者 DOM 中 。 这 里 使 用 的 节点 概念 与 XML 中 使 用 的 概念 相似 。 比 如 一 个 元 素 节点 <div></div> 
是 一 个 不 含 内 容 的 空 元 素 ， 而 <div> </div>， 则 认为 是 含有 一 个 文本 节点 的 元 素 ， 文 本 节点 的 
内 容 是 一 个 空格 字符 。:empty 过 滤器 不 会 选择 含有 文本 节点 的 元 素 ， 即 使 只 是 一 个 空格 字符 ， 
也 是 一 个 有 效 的 文本 节点 ， 不 会 被 :empty 过 滤器 选中 。 因 此 ， 在 使 用 :empty 过 滤器 的 网 页 中 ， 
要 严格 控制 含有 文本 内 容 的 元 素 ， 防 止 不 恰当 地 添加 空格 字符 或 者 不 可 见 的 字符 ， 造 成 网 页 不 
能 按照 预期 的 要 求 显示 或 者 出 现 其 他 程序 逻辑 错误 。 

代码 4.3 中 的 $(“td:empty”).text(“---”); 会 为 所 有 的 空 节点 添加 字符 串 “---*"， 可 是 ， 在 图 4.3 
的 实际 效果 中 ， 只 有 “国际 都 会 城市 ”下 面 的 一 个 节点 被 添加 了 这 个 字符 串 ， 而 “亚洲 都 会 城 
市 ”节点 下 面 的 三 个 空格 却 没有 被 添加 ， 原 因 就 是 相应 元 素 在 源 代码 中 含有 空格 字符 ， 因 此 不 
再 被 认为 是 空 节点 。 


代码 4.11 内 容 过 滤器 演示 


<!1DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>jQuery Selector - Content Filter</title> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<style> 
table, ta { 
border: lpx solid black; 
} 
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tell 
width: l2em; 
text-align: center; 
| 
</style> 
<script> 


$ (document) .ready (function() { 

S$("td:contains (' 香 港 ') ") 
-Css ("background-color"，"1ightGreen") 7 

$ ("td:empty") .text ("———"); 
$ ("td:parent") .css ("border-style", "dashed"); 

]) 7 

</script> 
</head> 


<body> 
<table> 
<tr> 
<tqd colspan="4"> 世 界 都 会 城市 </td> 
</tr> 
<tr> 
<td> 纽 约 </td><td> 伦 敦 </td><td> 巴 黎 </td><td> 悉 尼 </td> 
</tr> 
2 
<td> 多 伦 多 </td><td> 东 京 </td><td> 法 兰 克 福 </td><td> 洛 杉 矶 </td> 
</tr> 
< 
<td> 北 京 </td><td> 香 港 特别 行政 区 </td><td> 上 海 </td><td></td> 
</tr> 
i 
<td colspan="4"> 亚 洲 都 会 城市 </td> 
</tr> 
<tr> 
<td> 北 京 </td><td> 东 京 </td><td> 香 港 </td><td> 曼 谷 </td> 
</tr> 
<tr> 
<td> 上 海 </td><td> 深 圳 </td><td> 雅 加 达 </td><td> 大 阪 </td> 
雯 /> 
EE 
<td> 利 雅 得 </td><td> </td><td> </td><td> </td> 
</tr> 
</table> 
</body> 
</html> 


:contains() 过 滤器 使 用 参数 中 的 字符 串 与 元 素 节 点 中 的 文本 相 比较 , 从 图 4.3 中 很 明显 地 看 
到 ，:containsO 人 允许 部 分 匹配 ， 只 要 元 素 节点 中 的 文字 包含 指定 的 字符 串 ， 就 能 满足 匹配 条 件 。 
但 是 ，:contains0 在 英语 等 使 用 字母 的 环境 下 却 是 比较 严格 的 ， 字 母 的 大 小 写 必 须 相 符 。 这 
点 需要 特别 注意 。 
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图 4.3 :contains()、:empty 和 :parent 过 滤器 的 演示 效果 


4.2.4 继承 关系 选择 器 


jQuery 中 的 继承 关系 选择 器 与 CSS 组 合 选择 器 的 语法 非常 相似 ， 两 者 使 用 的 连接 字符 是 
- 致 的 ， 在 对 选择 器 的 解释 上 稍 有 差别 。 熟 悉 CSS 组 合 选择 器 的 读者 会 很 容易 理解 jQuery 继 
承 关系 选择 器 。 下 面 将 通过 表 4.5 对 jQuery 继承 关系 选择 器 做 简要 的 说 明 。 
表 4.5 继承 关系 选择 器 及 其 含义 
选 择 器 
子 元 素 选择 器 ， 连 接 符 为 “>”， 选 择 父 元 素 的 直接 子 元 素 。 父 
元 素 选择 器 为 任何 有 效 的 jQuery 选择 器 。 子 元 素 选择 器 用 于 种 
选 子 元 素 
后 代 元 素 选择 器 ,连接 符 为 空格 ， 选择 祖先 元 素 的 所 有 符合 后 代 
元 素 选择 器 的 后 代 元 素 。 祖 先 元 素 选择 器 为 任何 有 效 的 jQuery 
选择 器 。 后 代 元 素 选 择 器 用 于 筛选 后 代 元 素 
直接 相 邻 的 兄弟 元 素 选择 器 ， 连 接 符 为 “+”。 子 元 素 和 兄弟 元 
素 拥有 同一 个 父 元 素 。 被 选择 的 兄弟 元 素 必须 紧 跟 在 由 子 元 素 选 
择 器 所 匹配 的 子 元 素 后 面 
兄弟 元 素 选择 器 ， 连 接 符 为 “~”。 子 元 素 和 兄弟 元 素 拥 有 同一 
个 父 元 素 。 所 有 出 现在 由 子 元 素 选择 器 所 匹配 的 子 元 素 后 面 的 兄 
弟 元 素 都 将 被 选中 


父 元 素 选择 器 > 子 元 素 选择 器 


祖先 元 素 选择 器 后 代 元 素 选择 器 


子 元 素 选择 器 + 兄弟 元 素 选 择 器 


子 元 素 选择 器 ~ 兄弟 元 素 选择 器 


4.2.5 ”表单 选择 器 


表单 选择 器 是 指 对 表单 (<form> 元 素 ) 中 的 元 素 、 元 素 子 类 型 ， 以 及 元 素 的 当前 状态 作为 条 
件 进行 选择 的 选择 器 。 表 单 中 的 元 素 包 括 <input>、<textarea>、<button>、<select> 等 。 表 单元 
素 的 子 类 型 是 指 <input> 元 素 的 各 种 type 属性 。 表 单元 素 的 当前 状态 是 指 一 个 元 素 是 否 获得 输 
入 焦点 ， 一 个 选择 按钮 是 否 处 于 被 选择 的 状态 ， 或 者 一 个 表单 元 素 当前 是 否 处 于 失效 状态 等 。 
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表 4.6 列举 了 jQuery 1.10 支持 的 所 有 表单 选择 器 及 其 含义 。 

表 4.6 表单 选择 器 及 其 含义 

选择 器 说 明 

选择 所 有 的 <button> 元 素 和 type 属性 为 “button* 的 <input> 元 素 。:button 是 jQuery 对 CSS 选 
:button 择 器 的 扩展 。 如 果 直 接 在 jQuery 中 使 用 CSS 选择 器 的 语法 ，S$(*:button”) 与 $(“button, 
input[type=“button"]”) 作 用 相同 

:input 选择 所 有 的 <input>、<button>、<textarea> 和 <select> 元 素 


用 于 判断 表单 中 单 选 或 者 多 选 按钮 被 选中 的 状态 ， 或 者 <select> 列 表 中 被 选择 的 选项 。 对 于 


:hocked <select> 元 素 ， 建 议 使 用 :selected 选择 器 
选择 表单 元 素 中 利用 disabled 属性 正 处 于 失效 状态 表单 元 素 。:disabled 选择 器 应 该 仅 用 于 支 
:disabled 
持 disable 属性 的 HTML 元 素 
:text: 
checkbox 
:Tadio 
:file 分 别 用 于 选择 type 属性 为 “text*、“checkbox”、“radio”、“file”、“password”、“reset”、“submit”、 
:password 和 “image” 的 <input> 元 素 
:Teset 
:submit 
:image 
选择 所 有 没有 处 于 失效 状态 的 表单 元 素 。:enabled 选择 器 应 该 仅 用 于 支持 disable 属性 的 
ee HTML 元 素 。 从 逻辑 上 ，:enabled 选择 器 是 与 :disabled 互补 的 选择 器 ， 实 际 上 ，:enabled 选 


择 器 只 能 选择 disabled 属性 的 属性 值 为 false 的 表单 元 素 ， 所 以 :not([disabled]) 不 会 选择 拥有 
属性 disabled="“disabled” 的 表单 元 素 

:focus 选择 一 个 获得 焦点 的 表单 元 素 

:selected 选择 <select> 列 表 中 被 选择 的 <option> 元 素 


表单 选择 器 都 是 针对 常用 的 表单 元 素 及 其 状态 变化 的 。 这 些 选择 器 的 含义 比较 容易 理解 。 
但 是 ， 使 用 表单 选择 器 的 时 候 ， 需 要 注意 网 页 加 载 的 时 序 ， 及 表单 元 素 状态 改变 的 触发 条 件 。 
代码 4.12 演示 了 一 个 简单 的 表单 选择 器 的 实际 应 用 案例 。 
代码 4.12 ”表单 选择 器 对 表单 状态 变化 的 响应 
<!DOCTYPE html> 
<html> 
<head> 


<meta charset="UTF-8"> 
<title>jQuery Selector - Form</title> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
$ ("input") .click(function() { 
$("input:focus") .css ("background-color", "yellow"); 
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$ ("input:not(:focus) ") 
-Css ("background-color", "white") 7 
DD); 
Me 
</script> 
</head> 
<body> 
<form name="register" method="post" action="#"> 
<label for="customer"> 顾 客 : </label> 
<input type="text" name="customer" id="customer" required> 
<br> 
<label for="email"> 电 子 邮件 : </label> 
<input type="text" name="email" id="email" required> 
<br> 
<label for="phone"> 电 话 : </label> 
<input type="text" name="phone" id="phone" required> 
<br> 
<label for="address"> 地 址 : </label> 
<input type="text" name="address" id="address"> 
<br> 
<input type="submit"” value=" 注 册 "> 
</form> 
</body> 
</html> 


这 段 代 码 使 用 了 一 个 简单 的 表单 。jQuery 将 通过 表单 选择 器 动态 地 为 获得 焦点 的 表单 元 素 
添加 背景 颜色 。 当 网 页 加 载 到 浏览 器 中 时 ， 网 页 表单 中 的 元 素 还 没有 获得 焦点 ， 因 此 ， 默 认 的 
表单 背景 色 是 白色 。 表 单元 素 的 状态 改变 是 由 鼠标 点 击 触 发 的 ， 为 了 及 时 响应 鼠标 事件 ， 代 码 
中 使 用 了 click0 方 法 来 响应 鼠标 点 击 。 每 当 鼠 标点 击 时 ，click0 中 的 处 理 程序 就 开始 工作 。 这 
个 时 候 ， 会 用 到 两 个 jQuery 表单 选择 器 。 第 一 个 表单 选择 器 是 $C“input:focus”)， 这 个 选择 能 够 
返回 当前 获得 焦点 的 所 有 <input> 元 素 , 然后 对 返回 的 表单 元 素 添加 背景 颜色 ; 第 二 个 表单 选择 
器 是 $(“input:not(:focus)”)， 这 个 选择 器 能 够 返回 当前 没有 获得 焦点 的 所 有 <input> 元 素 。 它 能 够 
使 失去 焦点 的 表单 元 素 回 到 默认 的 样式 。 通 过 这 两 个 表单 选择 器 ， 能 够 确保 表单 中 只 有 获得 焦 
点 的 元 素 才 会 被 添加 背景 颜色 。 


4.3 jQuery 网 页 特效 


jQuery 网 页 特效 是 通过 综合 运用 JavaScript 和 CSS 实现 的 。 理解 本 书 第 3 章 中 的 各 种 CSS 
变换 效果 对 于 理解 jQuery 框架 中 的 网 页 特效 非常 有 帮助 。 同 样 ,深刻 理解 CSS 中 的 各 种 效果 ， 
将 同样 有 助 于 理解 jQuery Mobile 中 的 各 种 定制 方法 。 


4.3.1 基本 特效 


jQuery 的 基本 网 页 特效 是 指 一 个 网 页 元 素 的 显示 、 隐 藏 ， 以 及 显示 /隐藏 切换 3 个 基本 动 
作 。 这 3 个 基本 动作 对 应 的 jQuery 方法 分 别 是 showO、hide0 和 toggle()。 网 页 特效 的 目标 对 象 
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通过 jQuery 选择 器 获得 。 
代码 4.13 通过 网 页 上 的 3 个 按钮 分 别 演 示 三 种 基本 网 页 特效 。 


代码 4.13 jQuery 基本 网 页 特效 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Effects - Basic</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
$("#show") .click (function() { 
$("#n1") .show(); 
Ds; 
$("#hide") .click(function() { 
$("#n1") .hide(); 
]) 7 
$("#toggle") .click(function() { 
$("#n1") .toggle() 
]) 7 
]) 7 
</script> 
</head> 
<body> 
<button id="show"> 显 示 </button> 
<button id="hide"> 隐 藏 </button> 
<button id="toggle"> 显 示 / 隐 藏 </button> 
<hr> 
<img id="nl" src="images/nl1.jpg" alt="nl" width="129" height="60"> 
<img id="n2" src="images/n2.jpg" alt="n2" width="120" height="60"> 
</body> 
</html> 


代码 4.13 的 实际 效果 如 图 4.4 所 示 。 网 页 在 初始 状态 下 显示 两 幅 图 片 ， 分 别 用 数字 标识 。 
网 页 上 “隐藏 ”按钮 的 功能 是 将 第 一 幅 图 片 隐藏 ， 而 “显示 ”按钮 是 将 第 一 幅 画 面 恢复 成 显示 
状态 ， 网 页 上 的 “显示 /隐藏 ”按钮 实现 了 切换 功能 ， 不 论 图 片 当前 是 隐藏 还 是 显示 状态 ， 切 
换 按钮 都 能 使 图 片 转换 成 另外 一 种 状态 。 


口 localhostCHC 口 localhosUCHCI 


ER Eh nn 


2 


4.4 被 选择 的 HTML 元 素 处 于 显示 和 隐藏 两 种 各 种 状态 时 的 对 比 
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通过 代码 4.13 中 的 网 页 基本 特效 演示 , 我 们 可 以 明显 地 体会 到 jQuery 使 JavaScript 和 CSS 
编程 大 大 简化 了 。 假 设 不 使 用 jQuery 框架 ， 代 码 4.13 中 的 3 个 按钮 将 通过 以 下 方法 实现 。 

首先 ， 需 要 通过 document.getElementById() 方 法 获得 目标 元 素 ， 对 目标 元 素 通过 JavaScript 
程序 片段 添加 CSS 样式 。 这 个 步骤 同时 需要 编写 JavaScript 和 CSS 代码 。 显 示 与 隐藏 的 切换 功 
能 需要 JavaScript 程序 保留 当前 的 图 片 显示 状态 ， 或 者 动态 查询 图 片 的 当前 样式 属性 ， 然 后 按 
照 获 取 的 图 片 当前 显示 状态 来 决定 需要 为 目标 元 素 添加 哪 一 种 CSS 样式 。 而 当 使 用 了 jQuery 
以 后 ， 获 取 目 标 元 素 只 需要 通过 jQuery 选择 器 来 实现 。 另 外 ， 我 们 也 不 再 需要 保留 或 查询 图 
片 的 当前 显示 状态 ， 不 再 需要 编写 CSS 样式 代码 。 所 有 上 述 这 些 功 能 ， 都 可 以 通过 3 个 简单 
的 jQuery 方法 来 实现 。 


4.3.2 淡 入 淡出 


淡 入 淡出 是 jQuery 的 一 种 动画 特效 。 这 一 组 特效 通过 3 个 方法 实现 : fadeIn0、fadeOut(O、 
fadeToggle()。 

我 们 先 通过 代码 4.14 来 看 淡 入 淡出 特效 在 默认 条 件 下 的 显示 效果 。 

代码 4.14 ”默认 条 件 下 的 淡 入 淡出 特效 

<!DOCTYPE html> 

<html> 

<head> 


<title>jQuery Effects - Fading</title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
$("#fadeIn") .click(function() { 
$("#n1") .fadeIn(); 
]) 7 
$("#fadeOut") .click(function() { 
$("#n1") .fadeOut (); 
1D); 
$("#fadeToggle") .click(function() { 
$("#n1") .fadeToggle (); 


JR 
]) 7 
</script> 
</head> 
<body> 


"fadeIn"> 淡 入 </button> 

<button id="fadeOut"> 淡 出 </button> 

<button id="fadeToggle"> 淡 入 /淡出 </button> 

<hr> 

<img id="nl" src="images/nl.jpg" alt="nl" width="129" height="60"> 
</body> 
</html> 


<button id= 
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淡 入 淡出 是 在 显示 /隐藏 的 基础 之 上 加 上 了 变化 过 程 , 达 到 动画 效果 的 目的 。 从 中 文 的 “ 淡 
入 淡出 ”或 者 jQuery 的 方法 名 fadeIn0 和 fadeOut0 都 很 容易 理解 这 一 组 jQuery 方法 的 作用 。 在 
运行 代码 4.14 的 过 程 中 ， 我 们 看 到 变化 过 程 在 一 个 比较 短 的 时 间 内 完成 。jQuery 为 这 个 动画 
过 程 设 置 的 默认 值 是 400 毫秒 。 如 果 需 要 改变 动画 效果 的 速度 ， 可 以 通过 以 下 方法 来 完成 。 

以 fadeIn() 为 例 ， 这 个 方法 可 以 带 有 一 个 代表 动画 过 程 时 间 的 参数 : 

$("#n1") .fadeIn ("fast");  // 动画 过 程 : 200 毫秒 


$("#nl") .fadeIn("slow"); // 动画 过 程 : 600 毫秒 


$("#nl") .fadeIn (2000); // 由 网 页 开发 人 员 指 定 的 动画 过 程 ， 这 里 被 设置 为 2000 毫秒 

另外 ，jQuery 提供 了 通过 额外 的 JavaScript 回调 方法 (callback)， 为 人 deIn0 和 fadeOut0 特 
效 完成 以 后 提供 相应 的 处 理 功能 。 当 采用 这 种 功能 时 ，fadeIn0 相 应 的 调用 方式 就 变 成 为 : 

.fadeIn([duration] [, callback]) 

在 上 述 使 用 方法 中 出 现 了 两 个 参数 。 其 中 的 duration， 是 指 特效 动画 完成 过 程 所 需 的 时 间 ， 
可 以 采用 毫秒 值 ， 也 可 以 使 用 slow 或 者 fast 等 在 jQuery 中 已 经 预先 定义 的 常数 。 第 2 个 参数 
callback 是 一 个 JavaScript 回调 方法 。 

代码 4.15 演示 了 定义 回调 方法 的 编程 方法 。 回 调 方法 并 不 需要 像 其 他 JavaScript 方法 那样 
在 程序 中 显 式 调用 ， 而 是 在 当 条 件 满足 时 由 系统 自动 调用 。 

代码 4.15 fadeln() 和 fadeOut() 中 处 理 程序 的 用 法 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Effects - Fading (callback)</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
$("#fadeIn") .click(function() { 
$("#n1") .fadeIn("slow", function() { 
$("#info") .text ("fadeIn() 完 成 ") ; 
]}) 7 
1D); 
$("#fadeOut") .click (function() { 
$("#n1") .fadeOut ("slow", function() { 
$("#info") .text ("fadeOut () 完成 ") ; 
Ds 
]) 7 
]) 
</script> 
<style> 
#info { 
width: 200px; 
background-color: lightBlue; 
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} 
</style> 
</head> 
<body> 
<button id="fadeIn"> 淡 入 </button> 
<button id="fadeOut"> 淡 出 </button> 
<br> 
<div id="info"> 状 态 信息 </div> 
<hr> 
<img id="nl" src="images/nl1.jpg" alt="nl" width="129" height="60"> 
</body> 
</html> 


在 代码 4.15 的 fadeIn0O 和 fadeOutO0 中 分 别 定义 了 一 个 作为 参数 的 JavaScript 方法 ， 方 法 在 
fadeIn() 或 者 fadeOut0 的 特效 动作 完成 时 被 触发 。 

代码 4.15 中 的 处 理 程序 实现 了 如 图 4.5 所 示 的 在 网 页 上 的 固定 位 置 输出 特效 完成 状态 的 功 
能 。 在 实际 网 站 项 目 开发 过 程 中 ， 还 可 以 通过 自 定义 的 处 理 程 序 调 用 其 他 相关 的 JavaScript 方 
法 ， 从 而 实现 仅仅 在 特效 动作 完成 的 时 候 才 开 始 执 行 另 一 个 功能 的 作用 。 


] jQuery Effects - Fading x 
和 © DD localhost/CHCY? 


淡 入 | [淡出 | 


图 4.5 fadeOut() 动 作 结束 后 ， 由 处 理 程序 输出 当前 状态 


4.3.3 滑动 


我 们 实际 上 在 代码 4.6 中 已 经 通过 slideToggle() 使 用 了 滑动 特效 。slideToggle() 是 一 个 实现 
HTML 元 素 在 网 页 上 向 上 /向 下 滑动 切换 的 方法 。 与 淡 入 淡出 特效 类 似 ，slideToggle0 对 应 于 
slideUp0 和 slideDown() 方 法 。 

代码 4.16 演示 了 滑动 特效 的 编程 方法 ， 从 中 可 以 看 出 ， 这 一 节 所 介绍 的 三 种 jQuery 特效 
在 编程 方法 上 是 一 致 的 。 

代码 4.16 ”滑动 特效 演示 程序 

<1DOCTYPE html> 

<html> 

<head> 

<title>jQuery events - Sliding</title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
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$ (document) .ready (function() { 
$("#slideUp") .click (function() { 
$("#whale") .slideUp(); 
]) 7 
$("#slideDown") .click (function() { 
$("#whale") .slideDown(); 
Ds; 
$("#slideToggle") .click (function() { 
$ ("#whale") .slideToggle (); 
]) 7 
]) 7 
</script> 
</head> 
<body> 
<button id="slideUp"> 向 上 滑动 </button> 
<button id="slideDown"> 向 下 滑动 </button> 
<button id="slideToggle"> 向 下 /向 上 滑动 </button> 
<hr> 
<img id="whale" src="images/whale 01.jpg" alt=" 鲸 " 
width="504" height="376"> 
</body> 
</html> 


基本 特效 、 淡 入 淡出 特效 ， 以 及 滑动 特效 在 调用 相应 的 jQuery 方法 上 除了 可 以 使 用 不 带 
参数 的 方法 、 带 有 动画 完成 周期 作为 参数 的 方法 ， 带 有 回调 方法 的 参数 的 方法 ， 还 有 一 种 编程 
方式 ， 就 是 一 种 同时 集合 了 多 种 参数 选项 的 方法 。 当 使 用 这 种 方法 时 ， 把 所 有 需要 用 到 的 参数 
集成 到 一 个 JavaScript 对 象 中 ， 这 个 JavaScript 对 象 含有 一 个 或 多 个 键 值 对 ， 在 jQuery 和 
JavaScript 中 被 称 为 PlainObject。 每 一 个 键 对 应 了 一 个 选项 , 例如 , 代表 动画 过 程 周 期 的 duration， 
代表 动画 特效 开始 的 start， 以 及 代表 动画 特效 结束 的 complete 等 。 这 些 键 所 对 应 的 键 值 ， 按 照 
jQuery API 的 定义 ， 可 以 是 一 个 普通 的 单一 参数 值 ， 也 可 以 是 一 个 回调 方法 作为 键 值 。 由 于 这 
个 JavaScript 对 象 可 以 包含 所 有 可 能 的 选项 ， 其 中 作为 参数 的 各 种 回调 方法 又 具有 各 自 的 参数 
定义 ， 因 此 ， 在 实际 编程 中 ， 这 个 PlainObject 选项 集合 可 能 非常 简单 ， 也 可 能 非常 复杂 。 

这 里 通过 演示 代码 4.17 中 的 duration、start 和 complete 选项 ， 来 简要 介绍 这 种 使 用 选项 集 
合 的 编程 方式 。 


代码 4.17 ”使 用 选项 集合 的 编程 方式 调用 jQuery 特效 


<1DOCTYPE html> 
<html> 
<head> 


<title>jQuery events - Sliding</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
$("#slideToggle") .click (function() { 
$("#whale") .slideToggle ({ 
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duration: 1000, 
start: function() { 


S$ ("#info") .text (new Date() .getTime() + " - 开始 "); 
}, 
complete: function() { 
$("#info") .text (new Date() .getTime() + " - 完成 ") ; 
3 
2 
]) 7 
nD; 
</script> 
</head> 
<body> 
<input type="button" id="slideToggle" value=" 向 下 /向 上 滑动 "> 
<br> 
<div id="info"> 状 态 信息 </div> 
<hr> 


<img id="whale" src="images/whale 01.jpg" alt=" 鲸 " 
width="504" height="376"> 

</body> 

</html> 

代码 4.17 中 的 slideToggle0 方 法 只 使 用 了 一 个 JavaScript 对 象 作为 参数 。 这 个 JavaScript 
对 象 中 包含 了 3 个 键 值 对 ， 键 值 对 之 间 用 “,” 分 隔 。 在 这 3 个 键 值 对 中 ，duration 所 对 应 的 值 
是 一 个 常数 ， 而 start 和 complete 所 对 应 的 值 分 别 是 一 个 JavaScript 方法 。 每 一 个 键 值 对 描述 了 
jQuery 特效 的 一 个 属性 ， 或 者 一 个 满足 相应 条 件 才 会 触发 的 回调 方法 。 所 有 的 键 值 对 在 
JavaScript 对 象 中 形成 的 集合 ， 构 成 了 jQuery 特效 的 所 有 选项 。 


4.4 jQuery 的 事件 处 理 


4.4.1 鼠标 事件 和 键盘 事件 


熟悉 JavaScript 的 读者 都 会 了 解 JavaScript 中 与 鼠标 和 键盘 相关 的 事件 处 理 ， 例 如 click、 
mouseover、mouseout、keydown、keyup、keypress 等 。jQuery 对 上 述 事件 进行 了 进一步 包装 和 
扩展 ， 形 成 了 具有 jQuery 特色 的 处 理 方式 。jQuery 在 扩展 JavaScript 中 的 事件 处 理 过 程 中 ， 并 
没有 改变 事件 的 含义 ， 即 在 JavaScript 编程 中 所 说 的 click 等 事件 与 jQuery 中 的 相应 事件 的 含 
义 是 一 致 的 。 通 过 与 jQuery 选择 器 的 综合 应 用 ，jQuery 中 的 事件 处 理 方法 使 程序 结构 更 加 轻 
巧 、 简 化 。 

1. 鼠标 事件 的 处 理 


jQuery 的 鼠标 事件 处 理 程序 包括 下 列 方法 : click0、dblclickO0、focusoutO0、mousedown(O、 
mouseup()、hover()、mouseenter()、mouseleave()、mousemove()、mouseout()、mouseover()。 


以 其 中 最 常用 的 click 事件 为 例 ，click 代表 了 鼠标 单 击 事件 。jQuery 中 的 click0 方 法 包含 
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了 JavaScript 中 通过 HTML 的 onclick 属性 所 具有 的 把 click 事件 绑 定 到 一 个 特定 的 HTML 元 素 
的 作用 。 

代码 4.18 将 在 网 页 上 显示 两 个 按钮 ， 第 一 个 按钮 通过 jQuery 的 click0 响 应 按钮 单 击 事件 ， 
第 二 个 按钮 通过 HTML 的 onclick 属性 绑 定 一 段 JavaScript 的 事件 处 理 方法 。 当 单 击 任何 一 个 
按钮 以 后 ， 网 页 上 会 弹出 信息 提示 ， 说 明 当 前 的 事件 处 理 是 通过 常规 的 JavaScript 程序 还 是 
jQuery 事件 响应 方法 完成 的 。 

代码 4.18 JavaScrip 与 jQuery 对 于 鼠标 单 击 事件 的 响应 方法 对 比 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Events - Click</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<style> 
input[type='button'] { 
width: 150px; 
} 
</style> 
<script> 
$ (document) .ready (function() { 
$("#field1") .click (function(event) { 
alert ("jQuery"); 
]}) 7 
]) 7 
function clickHandlerl() { 
alert("JavVaScript") 7 
} 
</script> 
</head> 
<body> 
<input type="button" id="fieldl" name="fieldl1" 
value="jQuery : click()"> 
<br> 
<input type="button" id="field2" name="field2" 
value="Javascript : onclick()" 
onc1lick="clickHandlerl()"> 
</body> 
</html> 


代码 4.18 演示 了 在 jQuery 中 为 一 个 HTML 元 素 绑 定 事件 处 理 程序 的 典型 方法 。 首 先 通过 
jQuery 选择 器 找到 需要 绑 定 事件 处 理 程序 的 HIML 元 素 ,然后 对 找到 的 HTML 元 素 应 用 jQuery 
的 click0 方 法 。 

除了 上 述 最 基本 的 使 用 方法 以 外 ，click0 还 有 下 面 这 样 带 有 一 个 JavaScript 方法 作为 参数 
的 调用 方法 : 

click(handler) 


> 159 


jQuery Mobile 移 动 网 站 开发 


在 这 样 调用 方式 下 ，handler 是 一 个 JavaScript 方法 ， 并 且 这 个 方法 带 有 一 个 已 经 在 jQuery 
中 定义 的 event 对 象 作 为 handler 方法 的 参数 。 请 注意 这 里 讲 到 的 两 个 方法 的 关系 以 及 每 个 方法 
所 使 用 的 参数 ， 其 中 event 对 象 是 handler 方法 的 参数 ， 而 handler 方法 是 click0 方 法 的 参数 。 
代码 4.19 比较 清楚 地 表现 了 这 两 个 方法 的 关系 。 


代码 4.19 在 click() 方 法 中 使 用 另 一 个 JavaScript 方 法 作为 参数 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Events - Click</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<style> 
img { 
width: 200px; 
height: auto; 
} 
input { 
width: 100px; 
} 
</style> 
<script> 
$ (document) .ready (function() { 
$ ("form>*") .click (function(event) { 
Var targetId = event.target.id; 
$("#info") .text (targetId + "被 鼠标 单 击 ") ; 
DD 
Ds; 
</script> 
</head> 
<body> 
<form> 
<input type="text" id="fieldl" name="field1" 
placeholder="fieldl" value=""> 
<input type="text" id="field2" name="field2" 
placeholder="field2" value=""> <br> 
<img id="whale img" src="images/whale 01.jpg" alt=" 鲸 "> <br> 
<input type="button" id="button1l"”name="button1" 
value="Button"> <br> 
</form> 
<input type="text" id="field3" name="field3" 
placeholder="field3" value=""> <br> 
<hr> 
<div id="info"> 状 态 提示 - . .</div> 
</body> 
</html> 
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代码 4.19 的 运行 效果 如 图 4.6 所 示 。 程 序 中 使 
用 了 jQuery 选择 器 表达 式 “form>*”， 这 个 表达 式 
表示 选择 <form> 元 素 的 所 有 子 元 素 。 当 鼠标 单 击 网 
页 上 方 的 两 个 文本 框 ， 或 者 图 片 ， 或 者 图 片 下 面 的 
按钮 时 ， 网 页 会 在 屏幕 下 方 显示 被 单 击 的 HTML 元 
素 的 id 值 。 但 是 当 鼠 标 单 击 按钮 下 面 的 文本 框 时 ， 
屏幕 底部 的 提示 信息 并 没有 改变 。 这 说 明 按钮 下 面 
的 文本 框 并 没有 与 jQuery 的 click0 相 关联 。 原 因 十 
分 简单 ， 因 为 这 个 文本 框 在 网 页 文档 中 位 于 <form> 
元 素 之 外 ， 它 没有 被 jQuery 选择 器 选中 。 代 码 4.19 
中 的 另 一 个 特点 是 这 段 程序 使 用 了 event 参数 , 并 通 — 
过 event 参数 获得 了 被 单 击 的 HTML 元 素 的 记 值 。 ne 

jQuery 的 click0 方 法 除了 能 够 监听 到 一 个 
HTML 元 素 上 所 发 生 的 单 击 事件 以 外 ， 还 可 以 模拟 
出 一 个 单 击 效果 ， 即 由 click0 方 法 来 单 击 一 个 指定 
的 HTML 元素。 下面 通 过 代码 4.20 来 简要 介绍 这 种 使 用 方法 。 这 种 由 程序 来 触发 一 个 事件 的 
技巧 ， 也 同样 适用 于 其 他 鼠标 和 键盘 事件 ， 在 后 续 章 节 中 将 不 再 重复 介绍 。 


代码 4.20 ”由 程序 触发 的 事件 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Events - Click</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
$("#start") .click(function() { 
$("#field1") .click() .val ("你 好 ，jQuery!"); 
setTimeout (function() { 
$("#button1") .click(); 
}, 2000); 
Ds; 
A 
$ ("#field1") .click(function() { 
$("#fieldl") .css ("background-color", "yellow"); 
]) 
]) 7 
</script> 
</head> 
<body> 


4.6 通过 event 参数 获得 被 单 击 的 
HTML 元 素 的 ID 值 


<input type="text" id="fieldl”name="fieldl"” value=""> <br> 
<button id="button1l"” onclick="alert (' 发 送 按钮 被 单 击 ') "> 发 送 </button> 
<br> 
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<button id="start"> 开 始 </button> 
</body> 
</html> 
代码 4.20 在 浏览 器 中 显示 为 如 图 4.7 所 示 的 
-个 文本 框 和 两 个 按钮 ， 但 是 这 段 程序 隐 含 的 事 

件 触发 过 程 却 要 比 屏幕 界面 复杂 得 多 。 当 用 户 单 
击 屏幕 上 的 文本 框 时 ， 文 本 框 的 事件 响应 程序 会 
把 文本 框 的 背景 色 设置 为 黄色 。 当 用 户 点 击 “ 发 
送 ” 按 钮 时 ， 屏 幕 会 弹出 一 条 提示 信息 。 

以 上 的 事件 触发 过 程 与 代码 4.18 中 的 使 用 方 
法 基本 一 致 。 这 段 程序 的 特点 是 当 用 户 单 击 “ 开 图 4.7 代码 4.20 在 浏览 器 中 的 初始 状态 
始 ” 按钮 以 后 ， 由 程序 代码 $Cs#fieldl”).clickO 在 相 
应 的 元 素 上 做 出 了 单 击 动作 ， 该 单 击 动作 产生 的 效果 与 用 户 手 动 单 击 是 一 样 的 ， 都 会 被 绑 定 到 
文本 框 的 事件 处 理 程序 获得 ， 并 设置 文本 框 的 背景 色 。 在 “开始 ”按钮 的 click0 响 应 程序 中 ， 
除了 由 程序 单 击 了 文本 框 ， 还 通过 JavaScript 的 setTimeout0 方 法 设置 了 2 秒 钟 的 延 时 ， 当 延 时 
结束 后 ， 立 即 在 “发 送 ”按钮 上 通过 $Csfbuttonl”).clickO: 再 次 触发 单 击 事件 。 因 此 ， 这 段 程序 
的 执行 过 程 是 在 前 后 两 秒 钟 的 时 间 间 隔 上 依次 由 程序 单 击 了 文本 框 和 “发 送 ”按钮 ， 由 此 用 户 
只 需要 单 击 “ 开 始 ”按钮 ， 就 能 够 得 到 手动 单 击 文本 框 和 “发 送 ”按钮 相同 的 效果 。 

2. 键盘 事件 的 处 理 


jQuery 的 键盘 事件 处 理 程 序 包 括 下 列 方法 : focusout()、keydown()、keypress()、keyup()。 

键盘 事件 很 容易 理解 ， 例 如 ，keydown 和 keyup 就 是 分 别 代表 了 键盘 中 的 一 个 键 按 下 或 者 
抬 起 的 状态 。 

代码 4.21 演示 了 程序 对 这 两 种 键盘 状态 的 响应 .每 当 用 户 在 网 页 上 的 文本 框 中 按 下 或 者 释 
放 一 个 键 时 ，jQuery 就 会 把 键盘 状态 输出 到 屏幕 上 。 


代码 4.21 keydown 和 keyup 事 件 的 响应 程序 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Events - keydown | keyup</title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<style> 
input [上 type='button'] { 
width: 150px; 
} 
</style> 
<script> 
$ (document) .ready (function() { 
$ ("#fieldl") .keydown (function() { 
$ ("#info") .text ("keydown") 7 
Be 
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$ ("#field1") .keyup (function() { 
$("#info") .text ("keyup"); 
nD); 
]) 7 
</script> 
</head> 
<body> 
<input type="text" id="fieldl" name="fieldl" value="" > 
<br> 
<div idq="info"> 键 盘 事 件 . . .</div> 
</body> 
</html> 


4.4.2 ”表单 事件 


表单 事件 是 针对 发 生 在 <form> 及 其 内 部 所 包含 的 各 种 表单 元 素 上 的 状态 变化 , 主要 表现 在 
元 素 焦点 的 获得 或 者 失去 ， 表单 元素 内 容 的 变化 ， 表 单 的 发 送 状态 等 。 这 些 状态 改变 在 jQuery 
中 通过 以 下 方法 来 代表 : blur0、change0、focus0、focusin0)、select0、submitO 。 


1. 事件 触发 的 时 间 点 问题 


从 字面 上 很 容易 理解 上 述 jQuery 方法 的 含义 。 blur0 通 常 发 生 在 表单 元 素 失去 焦点 的 时 候 ， 
而 changeO 是 指 <input> 元 素 的 值 发 生变 化 的 时 候 。 使 用 表单 事件 时 ， 应 该 注意 到 每 一 个 方法 的 
制约 条 件 。Change 事件 发 生 在 <input>、<textarea> 和 <select> 等 表单 元 素 上 。 当 用 户 改变 了 
<select> 下 拉 列 表 中 的 选项 ,或 者 改变 了 单 选 或 者 多 选 按 钮 的 当前 值 时 ，change0 方 法 会 被 立即 
触发 ， 而 对 于 文本 字段 等 ， 则 需要 等 到 文本 框 失去 输入 焦点 以 后 才 会 触发 change0 方 法 。 

代码 4.22 演示 了 change 事件 触发 在 时 间 点 上 的 不 同 。 


代码 4.22 ”change 事 件 触发 条 件 演示 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Events - Form - change</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
$ ("select") .change (function() { 
$("#infol") .text (new Date () .getTime () 
+ "”- <select> 下 拉 列 表 触发 change () ") 
]) 
$ ("input [type='checkbox']") .change (function() { 
$("#infol") .text (new Date () .getTime () 
+ "”- 多 选 按钮 触发 cnange () "); 
]) 
$ ("input [type='text']") -change (function() { 
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$("#infol") .text (new Date () .getTime () 


+ "= 文本 输入 完成 ") ; 
DD); 


$ ("input [type="'text']") .keypress (function() { 
$ ("#info2") .text (new Date() .getTime () 


+ "”- 字符 输入 完成 ") ; 
]) 7 
]) 7 
</script> 
</head> 
<body> 
<form> 
select> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
</select> 
<br> 


选项 1: <input type="checkbox" name="choice" 


Value="choice vl"><br> 


选项 2: <input type="checkbox" name="choice" 


value="choice v2"><br> 


选项 3: <input type="checkbox" name="choice" 


value="choice v3"> 

<br> 
<input type="text"><br> 
<div id="infol"> 表 单 事件 . .</div> 
<div id="info2"> 键 盘 事 件 . .</div> 

</form> 

</body> 
</html> 


代码 4.22 在 下 拉 列 表 、 多 选 按钮 和 文本 输入 框 
上 分 别 绑 定 了 change 事件 。 运行 这 段 程 序 , 我 们 可 
以 看 到 change 事件 在 不 同 的 表单 元 素 上 会 有 不 同 
的 触发 条 件 。 又 由 于 change 事件 在 文本 框 上 要 等 到 
文本 输入 完成 ， 并 且 输 入 焦点 移出 文本 框 以 后 才 会 
触发 ， 如 果 需 要 跟踪 每 一 次 按键 动作 ， 就 需要 在 文 
本 框 上 绑 定 键盘 事件 keypress。 代 码 4.22 同样 演示 
了 对 键盘 事件 的 处 理 ， 若 文本 输入 还 在 进行 中 ， 就 
会 得 到 如 图 4.8 所 示 的 演示 结果 。 图 中 ， 当 每 一 次 
按键 动作 完成 时 ， 都 会 提示 字符 输入 完成 ， 但 是 ， 
只 要 输入 焦点 仍 处 于 文本 输入 框 之 内 ， 就 不 会 触发 
文本 框 的 change 事件 。 
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2. 表单 元 素 的 输入 焦点 与 气泡 上 浮 效应 


blur 事件 比较 容易 与 鼠标 事件 中 的 focusout 事件 混淆 ， 两 者 都 发 生 在 元 素 失去 焦点 以 后 。 
两 者 的 主要 区 别 是 ， 鼠 标 事 件 focusout 具有 气泡 上 浮 (bubble) 的 特点 ， 当 被 jQuery 选择 器 选中 
的 元 素 中 的 一 个 子 元 素 失去 焦点 的 时 候 ， 被 选中 的 元 素 本 身 也 会 间接 触发 focusout 事件 ， 而 表 
单 事件 blur 只 能 作用 在 被 选择 的 元 素 上 。 也 就 是 说 ，blur 事件 没有 气泡 上 浮 的 效应 。 

代码 4.23 演示 了 blur 和 focusout 两 种 事件 的 不 同 。 

代码 4.23 blur 事件 气泡 效应 的 演示 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Events - Form - blur</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
$ ("div#d1l") .focusout (function() { 
$("#info div focusout") .上 text (new Date () .getTime () 
cdlv id="qdl"> : Focusout hs 
Ws 
$ ("div#d2") .blur (function() { 
$("#info div blur") .text (new Date() .getTime () 
HS dd nr 
J 
$ ("input") .blur (function(event) { 
Var targetId = event.target.id; 
$("#info input blur") .text (new Date() .getTime () 
+ v= <inpat>-: blur = ,+ targetId})s 
1); 
]) 7 
</script> 
</head> 
<body> 
<div id="dl"> 
<input type="text" id="inputl"><br> 
<input type="text" id="input2"><br> 
</div> 
<div id="d2"> 
<input type="text" id="input3"><br> 
<input type="text" id="input4"><br> 
</div> 
<p>&lt;div&ggt; 状 态 变 化 </p> 
<div id="info div focusout"></div> 
<div id="info div blur"></div> 
<p>&1t; input&ggt; 状 态 变 化 </p> 
<div id="info input blur"></div> 
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</body> 
</html> 


代码 4.23 通过 从 上 到 下 4 个 文本 输入 框 来 演示 当 文 本 框 失 去 输入 焦点 以 后 的 事件 触发 状 
态 。 这 4 个 文本 输入 框 分 为 两 组 ,第 一 组 两 个 文本 框 ,包含 在 一 个 <div> 元 素 中 ,用 于 监听 focusout 
事件 ， 第 二 组 两 个 文本 框 ， 包 含 在 另 一 个 <div> 元 素 中 ， 用 于 监听 blur 事件 。 当 第 一 组 的 两 个 
文本 框 失去 输入 焦点 以 后 ， 包 含 这 两 个 文本 框 的 <div> 元 素 因为 focusout 事件 的 上 浮 效应 ， 从 
而 触发 了 focusout0 方 法 。 而 当 第 二 组 的 两 个 文本 框 失 去 输入 焦点 以 后 ， 包 含 着 两 个 文本 框 的 
<div> 元 素 由 于 blur 事件 不 具有 上 浮 效应 ， 不 能 监听 到 内 部 所 包含 的 元 素 发 生 了 blur 事件 。 如 
果 我 们 直接 在 <input> 元 素 上 监听 blur 事件 ， 每 当 文 本 框 失 去 输入 焦点 以 后 ， 相 应 的 <input> 元 
素 上 都 会 立即 触发 blur0 方 法 。 


4.4.3 浏览 器 事件 


jQuery 的 浏览 器 事件 处 理 程序 包括 下 列 处 理 方法 : error()、scroll0、resize()。 

jQuery 的 resize 和 scroll 事件 可 以 发 生 在 一 个 HTML 元 素 上 , 也 可 以 发 生 在 浏览 器 窗口 上 。 
这 两 个 事件 分 别 代 表 了 一 个 元 素 或 者 浏览 器 窗口 的 大 小 变化 或 者 屏幕 滚动 。 

代码 4.24 演示 了 这 两 种 事件 ,其 中 既 可 以 通过 一 般 的 jQuery 选择 器 表达 式 选择 一 个 HTML 
元 素 ， 也 可 以 通过 $(window) 选 择 当前 的 浏览 器 窗口 。 当 在 浏览 器 中 运行 代码 4.24 时 ， 屏 幕 上 
将 按照 resize 和 scroll 发 生 的 对 象 做 出 相应 的 提示 。 

代码 4.24 浏览 器 事件 演示 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Events - Browser - resize | scroll</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
$ (window) .resize (function() { 
$("#info") .text (new Date() .getTime () 
+ " 一- 浏览 器 发 生 了 resize 事件 "); 
Ds; 
$ (window) .scroll (function() { 
$("#info") .text (new Date() .getTime() 
+ "”-- 浏览 器 发 生 了 scroll 事件 "); 
]) 
$("#ContentDiv") .scroll (function() { 
$("#info") .text (new Date () .getTime () 
+ " -- <div> 发 生 了 scroll 事件 ") ; 
a 
Ds 
</script> 
</head> 


166 < 


第 4 章 jQuery TI 门 


<body> 
<div id="info"> 状 态 信息 : </div> 
<div id="contentDiv" style="width:200px; height:200px; 
background-color: lightgray; overflow: auto;"> 
<pre> 
圆周 率 x (小 数 点 后 300 位 )= 
3.14159 26535 89793 23846 26433 
83279 50288 41971 69399 37510 
58209 74944 59230 78164 06286 
20899 86280 34825 34211 70679 
82148 08651 32823 06647 09384 
46095 50582 23172 53594 08128 
48111 74502 84102 70193 85211 
05559 64462 29489 54930 38196 
44288 10975 66593 34461 28475 
64823 37867 83165 27120 19091 
45648 56692 34603 48610 45432 
66482 13393 60726 02491 41273 
</pre> 
</div> 
</body> 
</html> 


4.5 ”jQuery 网 页 的 动态 处 理 


在 这 一 节 之 前 ， 我 们 介绍 的 大 部 分 jQuery 编程 技巧 都 是 围绕 网 页 的 静态 内 容 。 静 态 内 容 
是 指 网 页 在 浏览 器 中 加 载 完 成 ， 并 且 jQuery 已 经 完成 了 初始 化 以 后 呈现 给 网 页 用 户 的 内 容 。 

本 章 的 一 部 分 实例 代码 则 在 静态 内 容 的 基础 上 ， 动 态 改变 网 页 的 内 容 ， 包 括 HIML 元 素 
的 背景 颜色 和 网 页 上 的 文字 等 。 这 一 节 将 把 重点 放 在 网 页 内 容 的 动态 改变 上 。 


4.5.1 网 页 样式 的 处 理 


1. 动态 变更 CSS 类 


当 一 个 网 页 在 浏览 器 中 显示 以 后 ， 通 过 修改 某 一 个 元 素 所 具有 的 CSS 类 ， 达 到 修改 网 页 
显示 样式 的 目的 。 

jQuery 为 此 提供 了 下 列 方法 : addClass()、removeClass()、hasClass()、toggleClass()。 

在 以 上 4 个 方法 中 ，addClass0 和 removeClass0 用 于 为 被 选择 的 HTML 元 素 添加 或 者 去 除 
指定 的 CSS 类 。hasClassO 用 于 测试 一 个 HTML 元 素 是 否 在 当前 被 赋予 了 一 个 指定 的 CSS 类 ， 
这 个 方法 将 返回 true 或 者 false。 

toggleClass(0) 能 够 使 一 个 HTML 元 素 在 添加 和 去 除 一 个 CSS 类 之 间 切 换 。 

利用 上 面 提 到 的 4 个 方法 中 的 前 3 个 , 可 以 为 一 个 简单 的 文字 编辑 器 中 的 内 容 设置 不 同 的 
文字 风格 ， 比 如 粗 体 、 和 斜体 ， 以 及 下 划 线 等 。 代 码 4.25 实现 了 这 样 的 功能 。 当 一 个 命令 按钮 被 
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按 下 时 ， 程 序 首先 通过 hasClass0 测 试 当 前 的 文本 显示 区 是 否 被 赋予 了 相应 的 CSS 类 ， 
经 被 赋予 ， 就 会 通过 removeClass() 方 法 去 除 ， 反 之 通过 addClass0 方 法 添加 。 


代码 4.25 ”动态 测试 、 添 加 、 去 除 CSS 类 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery - 网 页 动态 处 理 - css 类 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 


<style> 
button { 
width: 30px; 
} 
textarea { 
width: 300px; 
height: 100px; 
下 
-bold { 
font-weight: bolder; 
} 
italic 
font-style: italic; 


} 
.underline { 
text-decoration: underline; 
} 
</style> 
<script> 
$ (document) .ready (function() { 
$("#button bold") .click (function() { 
if ($("textarea") .hasClass("bold")) { 
$ ("textarea") .removeClass ("bold"); 
} else { 
$ ("textarea") .addClass ("bold"); 
} 
1D); 
$("#button italic") .click(function() { 
if ( $("textarea") .hasClass ("italic")) { 
$ ("textarea") .removeClass ("italic"); 
} else { 
$ ("textarea") .addClass ("italic"); 
: 
Ds 
$("#button underline") .click(function() { 
if ($("textarea") .hasClass ("underline")) { 
$ ("textarea") .removeClass ("underline™"); 
} else { 


$ ("textarea") .addClass ("underline"™); 
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1 
Ds; 

</script> 

</head> 

<body> 
<button id="button bold" class="bold">B</button> 
<button id="button italic" class="italic">I</button> 
<button id="button underline" class="underline">U</button> 
<hr> 
<textarea></textarea> 

</body> 

</html> 


在 代码 4.25 中 ， 每 一 个 按钮 所 对 应 的 事件 处 理 程序 都 是 经 过 测试 和 变更 CSS 类 两 个 主要 
步 又， 程序 结构 元 长 ， 显 然 这 并 不 是 编程 的 好 办 法 。toggleClass() 方 法 就 能 大 大 简化 这 段 程序 。 
由 于 toggleClass() 方 法 能 够 自动 地 在 添加 和 去 除 之 间 转 换 ， 程 序 因此 可 以 能 够 省 略 测试 等 繁琐 
的 过 程 。 这 样 ， 程 序 片段 : 

$("#button bold") .click(function() { 

if ($("textarea") .hasClass ("bold")) { 
$ ("textarea") .removeClass ("bold"); 
} else { 
$ ("textarea") .addClass ("bold"); 
Ds; 
就 会 被 下 面 的 一 行 代码 取代 : 


$ ("textarea") .toggleClass ("bold"); 


2. 动态 改变 CSS 属 性 


-个 CSS 类 是 多 个 样式 声明 的 集合 。 除 了 可 以 对 一 个 HTML 元 素 重 新 赋予 一 个 CSS 类 以 
外 ，jQuery 的 css0 方 法 能 够 用 于 测试 和 设 定 一 个 HTML 元 素 的 某 一 个 CSS 属性 。css() 方 法 可 
以 根据 需要 达到 的 目的 ， 表 现 为 几 种 不 同 的 形式 ， 比 如 css(“ 属 性 名 ”,“ 属 性 值 ”) 用 于 设置 一 个 
CSS 属性 ， 而 css(“ 属 性 名 ”) 则 代表 了 查询 被 选择 的 HTML 元 素 当 前 的 CSS 属性 值 。 

使 用 css0 方 法 时 会 发 现 两 个 显著 的 特点 : 

@ ”作为 参数 的 CSS 属性 名 称 允许 使 用 两 种 形式 。 以 “-” 为 连接 符 连接 多 个 单词 的 标准 
CSS 属性 名 称 ， 或 者 使 用 除了 第 一 个 字符 以 外 其 他 每 个 单词 的 首 字符 大 写 的 “驼峰 ” 
格式 。jQuery 对 这 两 种 属性 名 表达 形式 同等 对 待 。 

@ ”通过 css() 方 法 获得 的 样式 属性 可 能 包含 多 重组 合 。 如 果 需 要 判断 其 中 的 一 个 具体 特 
性 ， 还 需要 对 返回 结果 进行 进一步 解析 。 

代码 4.26 演示 了 css0 方 法 的 4 种 用 法 。 

代码 4.26 ”css() 方 法 的 多 种 用 法 


<!DOCTYPE html> 
<html> 
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<head> 


<title>jQuery - 网 页 动态 处 理 - style</title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<style> 


button.simple { 


} 


width: 30px; 


button.multi { 


width: 45px; 
} 
textarea { 
width: 300px; 
height: 100px; 
} 
</style> 
<script> 


$ (document) .ready (function() { 


$("#button bold") .click (function() { 
Var fontWeight = $("textarea") .css ("font-weight"); 
if (fontWeight==400 || fontWeight=="normal") { 
$ ("textarea") .css ("font-weight", "bolder"); 
} else { 
$ ("textarea") .css ("font-weight", "normal"); 
} 
HW 
$("#button italic") .click(function() { 
Var fontStyle = $("textarea") .css ("font-style"); 
if (fontStyle i 
$ ("textarea") .css ("font-style", ""); 
} else { 
$ ("textarea") .css ("font-style", "italic"); 


} 
]) 7 
$("#button underline") .click(function() { 
Var textDecoration = $("textarea") .css ("text-decoration"); 
alert (textDecoration); 
if (textDecoration == "underline") { 
$ ("textarea") .css ("text-decoration", ""); 
} else { 
$ ("textarea") .css ("text-decoration", "underline"); 
]) 
$("#button red _ yellow") .click(function() { 
$("textarea") 
.Css({"color":"red", "background-color":"yellow"}); 
Ds; 
$("#button normal") .click(function() { 


$ ("textarea") .css({"color":"black", 
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"background-color": "white", 
"font-weight":"normal", 
"font-style":"normal", 
"text-decoration":"none"}); 
Bl 
Ds; 
</script> 
</head> 
<body> 
<button id="button bold" class="simple">B</button> 
<button id="button italic" class="simple">I</button> 
<button id="button underline" class="simple">U</button> 
<button id="button red yellow" class="multi™ 
style="color:red;background-color:yellow; "> 红 </button> 
<button id="button normal" class="multi"> 正 常 </button> 
<hr> 
<textarea></textarea> 
</body> 
</html> 


在 $(“textarea”).css(“font-weight”); 中 ，CSS 样式 名 称 作 为 css0 方 法 的 参数 ， 这 种 方法 用 于 
从 指定 的 HTML 元 素 上 读 取 指定 的 CSS 样式 。S$(“textarea”).css(“font-weight”, “bolder”): 中 的 两 
个 参数 分 别 是 样式 属性 和 样式 的 值 。 这 种 方法 用 于 对 指定 的 HTML 元 素 动态 赋予 一 个 指定 的 
CSS 样式 。 而 在 $(“textarea”).css(“font-style”,“”); 中 ， 为 一 个 样式 属性 动态 赋予 空 字符 串 ， 相 当 
于 把 指定 的 样式 从 被 选择 的 HTML 元 素 上 删除 。 

在 $(“textarea”).css({“‘color”:“red”, “background-color”:“yellow”}):; 中 ,css0 方 法 仅 使 用 了 一 个 
参数 ， 但 是 这 个 参数 与 前 面 3 种 用 法 中 的 字符 串 类 型 参数 不 同 ， 这 个 参数 是 一 个 JavaScript 对 
象 。 这 个 对 象 可 以 包含 多 个 样式 声明 ， 每 个 样式 声明 组 成 了 JavaScript 对 象 的 一 组 键 值 对 。 每 

-组 键 值 对 通过 喜 号 “,” 分 隔 。 所 有 键 值 对 之 外 通过 花 括号 定义 这 个 JavaScript 对 象 。 

在 代码 4.26 中 特意 安排 了 alert(textDecoration): 用 于 实时 检测 text-decoration 样式 的 当前 
值 。 当 网 页 在 Chrome 浏览 器 中 加 载 后 的 初始 状态 下 和 通过 $('‘textarea””).css(““text-decoration”, 
“underline”): 赋 予 <textarea> 中 的 文字 下 划 线 样式 后 ,分别 点 击 [U | 按钮 ,能够 看 到 如 图 4.9 所 示 
的 两 个 画面 。 这 两 个 画面 说 明了 通过 css0 方 法 可 以 得 到 指定 样式 的 全 部 信息 ， 并 不 限定 于 我 们 
通过 程序 设 定 的 一 部 分 样式 。 


JavaScript Alert JavaScript Alert 


| none solid rgb(0, 0, 0) | underine solid rgb(0, 0, 0) 


区 = 到 = 


图 4.9 _ Chrome 浏览 器 提示 的 动态 CSS 样 式 信息 
3. 实时 检测 HTML 元 素 和 浏览 器 显示 区 域 的 大 小 
每 一 个 可 见 的 块 级 元 素 和 内 联 块 级 元 素 ( 见 2.2.4 小 节 中 有 关 块 级 元 素 和 内 联 元 素 的 描述 ) 
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都 可 以 通过 width 和 height 设置 显示 宽度 和 高 度 。 元 素 的 显示 遵循 Box 模型 ( 见 3.3.1 小 节 中 有 
关 Box 模型 的 描述 ) 的 基本 规则 。 根据 Box 模型 原理 ,一 个 元 素 在 显示 时 从 里 向 外 分 为 内 容 区 、 
内 框 (padding)、 边 框 (border) 和 外 框 (margin) 几 个 层次 。 元 素 的 显示 宽度 和 高 度 及 其 Box 模型 的 
各 个 层次 都 可 以 动态 改变 。jQuery 为 我 们 提供 了 下 列 方法 ， 可 以 快速 获得 HTML 元 素 的 实时 
显示 样式 : widthO0、heightO、innerWidthO、innerHeightO0、onuterWidthO、outerHeightO。 

代码 4.27 演示 了 以 上 6 个 jQuery 方法 的 作用 。 


代码 4.27 ”获取 实时 Box 模 型 数据 


<!DOCTYPE html> 
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<html> 
<head> 


<title>jQuery - 网 页 动态 处 理 - width | height</title> 
<meta charset="utf-8"> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js" 
<style> 

div#testDiv { 


} 


width: 300px; 
height: 150px; 
border-style: solid; 
border-width: 40px; 
border-color: lightGreen; 
padding: 40px; 
margin: 40px; 


background-color: Ivory; 


</style> 
<script> 
$ (document) .ready (function() { 


$("#width") .click(function() { 
$("#info") .text ("weight() —" 
+ $("#testDiv") .width ()); 
]) 
$("#height") .click(function() { 
$("#info") .text ("height() —" 
+ $("#testDiv") .height ()); 
]) 7 
$("#innerWwidth") .click(function() { 
$("#info") .text ("innerWidth() —" 
+ $("#testDiv") .innerWidth()); 
Mn 
$ ("#innerHeight") .click (function() { 
$("#info") .text ("innerHeight() 一 " 
+ $("#testDiv") .innerHeight ()); 
Ds; 
$("#outerWidth") .click(function() { 
$("#info") .text ("outerWidth() —" 
+ $("#testDiv") .outerWidth()); 


></script> 
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ps 
$("#outerHeight") .click (function() { 
$("#info") .text ("outerHeight() —" 
+ $("#testDiv") .outerHeight ()); 
DD); 
Ds 
</script> 
</head> 
<body> 
<button id="width">Width</button> 
<button id="height">Height</button> 
<br> 
<button id="innerWidth">inner Width</button> 
<button id="innerHeight">inner Height</button> 
<br> 
<button id="outerWidth">Outer Width</button> 
<button id="outerHeight">Outer Height</button> 
<br> 
<div id="info"> 信 息 提 示 . . .</div> 
<hr> 
<div id="testDiv"> 文 本 内 容 </div> 
</body> 
</html> 


这 段 代码 将 在 浏览 器 中 显示 一 个 普通 的 <div> 元 素 。 它 宽 300px， 高 150px， 内 框 、 边 框 和 
外 框 宽度 都 是 40px， 并 且 边 框 被 设置 为 浅 绿色 ， 如 图 4.10 所 示 。 


jQuery - 网 页 动态 处 理 -x 
€ 3 © Dlocahost/CHO4/g_manipulation_width_heightt 安 | 三 
ET Co] 

Linner Width | | inner Height | 
Lower Wath | | Ovter Hoight | 
weight) - 300 


图 4.10 jQuery 计算 HTML 元 素 宽度 和 高 度 的 方法 
图 4.10 对 代码 4.27 中 的 <div> 元 素 的 高 度 、 内 框 、 边 框 和 外 框 进 行 了 标注 ， 图 中 浅 绿 色 边 
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框 以 内 到 显示 文字 的 部 分 为 内 框 (padding)， 浅 绿色 边框 以 外 延伸 到 浏览 器 边缘 或 者 与 其 他 
HTML 元 素 之 间 的 部 分 为 外 框 (margin)。jQuery 的 height0 方 法 返回 一 个 元 素 的 内 容 区 的 高 度 ， 
从 图 中 可 以 看 到 <div> 的 内 容 区 的 高 度 为 150。jQuery 的 innerHeight() 方 法 返回 值 包括 内 容 区 和 
内 框 ， 相 当 于 内 容 区 的 高 度 300px 加 上 上 下 两 个 各 自 40px 的 内 框 的 高 度 ， 总 共 230。jQuery 
的 outerHeight0) 方 法 返回 值 包括 内 容 区 、 上 下 两 个 内 框 、 上 下 边框 和 上 下 两 个 外 框 (可 选 )。 
outerHeight() 方 法 可 以 带 有 一 个 布尔 型 参数 ， 当 这 个 参数 值 为 rue 时 ， 元素 的 外 框 (margin) 才 会 
被 计算 在 内 ， 而 元 素 的 内 框 在 任何 情况 下 都 会 被 计算 在 内 。 代 码 4.27 中 ，outerHeight0 方 法 将 
只 包括 内 容 区 、 内 框 和 边框 ， 因 此 返回 值 是 310。 

读者 是 否 注意 到 当 我 们 提 到 上 述 方法 的 返回 值 时 ， 都 没有 提 到 单位 。 原 因 是 ， 上 述 方法 在 
jQuery 的 设计 上 为 了 便于 数学 计算 ， 因 此 仅仅 返回 数值 ， 而 把 单位 px 省 略 了 ， 而 css(“height”) 
则 会 同时 返回 元 素 的 计量 单位 。 

上 述 方法 中 的 width0 和 height0， 还 可 以 把 window 和 document 当 作 参数 值 ， 用 于 计算 浏 
览 器 的 用 户 显示 区 域 和 HTML 文档 所 占 的 宽度 和 高 度 。 但 是 ， 参 数值 window 和 document 不 
适用 于 其 他 4 个 方法 。 


4.5.2 网 页 内 容 的 处 理 


1. 查询 和 更 改 HTML 元 素 的 属性 值 


网 页 中 的 一 部 分 内 容 是 由 HTML 元 素 的 属性 值 决定 的 。 比 如 一 幅 图 片 的 内 容 就 是 由 <img> 
元 素 的 src 属性 来 指定 的 。 如 果 在 网 页 运行 过 程 中 改变 属性 值 ， 页 面 上 的 图 片 也 会 随 之 更 换 。 

jQuery 的 attr0 方 法 具有 查询 和 设置 HTML 元 素 中 一 个 属性 的 能 力 。 与 其 他 jQuery 方法 在 
参数 使 用 上 基本 一 致 ， 当 attr0 使 用 一 个 属性 名 称 作 为 参数 时 ,用 于 查询 该 属性 的 属性 值 ; 当 同 
时 使 用 两 个 参数 时 ， 第 一 个 参数 代表 HTML 元 素 的 属性 名 称 ， 第 二 个 参数 代表 属性 值 ， 很 明 
显 ， 这 样 的 调用 接口 是 用 于 设置 HTML 元 素 的 参数 值 的 。 当 atr0 只 有 一 个 参数 ， 而 这 个 参数 
是 一 个 JavaScript 对 象 时 ， 则 可 以 通过 键 值 对 的 方式 同时 对 多 个 属性 进行 更 改 。 

代码 4.28 演示 了 attr(0 方 法 的 两 种 用 法 : $(“#picture”).attr(“sre”) 用 于 获得 id 值 为 “picture” 
的 HTML 元 素 的 src 属性 值 。 通 过 attr0 获 得 的 参数 值 并 不 一 定 是 HIML 文档 中 最 初 指定 的 初 
始 值 ， 当 参数 值 在 网 页 运行 过 程 中 被 动态 更 改 以 后 ，attr0 能 够 得 到 指定 属性 的 当前 值 。 而 在 
$(Csfpicture").attr({esrc":“images/n2.jpg” “alt”:“2”}); 中 ， 同 样 只 使 用 了 一 个 参数 ， 这 个 参数 是 一 
个 含有 多 个 键 值 对 的 JavaScript 对 象 ， 用 于 对 指定 的 HTML 元 素 同 时 更 改 多 个 属性 值 。 


代码 4.28 ”通过 更 改 HTML 元 素 的 属性 实现 对 网 页 内 容 的 更 新 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery - 网 页 动态 处 理 - attr()</title> 
<meta charset="utf-8"> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .ready (function() { 
$ ("#0one") .click(function() { 
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$("#picture") .attr({"src":"images/n1.jpg", "alt":"1"}); 
Ds; 
$("#two") .click (function() { 
$("#picture") .attr({"src":"images/n2.jpg", "alt":"2"}); 
Fs 
$("#currentPicture") .click(function() { 
alert ("当前 图 片 : " + $("#picture") .attr("src")); 
]) 7 
Ds; 
</script> 
</head> 
<body> 
<button id="currentPicture"> 当 前 图 片 </button> 
<button id="one"> 选 择 图 片 1</button> 
<button id="two"> 选 择 图 片 2</button> 
<hr> 
<img id="picture" src="images/nl.jpg" alt="1"> 
</body> 
</html> 


使 用 attr0 更 改 HTML 元 素 的 属性 值 ， 应 该 了 解 其 中 的 一 些 使 用 限制 。 比 如 ， 不 允许 更 改 
<input> 元 素 的 type 属性 ， 也 不 应 该 更 改 HTML 元 素 的 id 值 。 

当 使 用 “属性 ”这 个 概念 时 ,不 得 不 提 到 英语 中 的 attribute 和 property 这 两 个 单词 。 jQuery 
中 的 atr0 和 prop0 分 别 适用 于 这 两 个 概念 。attribute 更 多 是 指 通过 字面 显 式 定义 的 属性 ， 而 
property 则 侧重 于 事物 本 身 所 具有 的 特性 。 以 HTML 元 素 的 布尔 型 属性 为 例 (参看 2.1.2 小 节 中 
有 关 布尔 型 属性 的 描述 )， 下 面 3 行 代码 是 等 价 的 : 
<input type="checkbox" name="options"” id="opl"” value=" 选 项 一 ”checked> 
<input type="checkbox" name="options" id="opl" value=" 选 项 一 "checked=""> 
<input type="checkbox" name="options" id="opl" value=" 选 项 一 " checked="checked"> 
由 于 布尔 型 属性 的 以 上 3 种 写法 都 是 有 效 的 , 直接 使 用 attr0 方 法 无 法 正确 表达 该 属性 的 含 
在 这 种 情况 下 ， 就 可 以 通过 下 列 方式 之 一 解决 : 
$("#opl") .prop ("checked") 
$ ("#0p1l") .is(":checked") 


从 


2. 更 改 网 页 的 内 容 


在 本 章 前 面 的 实例 程序 中 ， 我 们 已 经 多 次 见 到 text0 和 val0 两 个 jQuery 方法 。 

text() 方 法 val0 方 法 可 以 读 取 或 者 更 改 一 个 HTML 元 素 ， 比 如 <div> 中 的 文本 内 容 ，val0 方 
法 用 于 读 取 和 设置 <input> 文 本 框 或 者 <textarea> 的 内 容 。 除 了 以 上 两 个 方法 外 ，jQuery 还 提供 
了 html0 方 法 ， 用 于 读 取 或 者 更 换 网 页 文档 中 的 一 个 HTML 片段 。 

代码 4.29 实现 了 一 个 简单 的 复制 粘贴 功能 。 网 页 上 有 两 个 主要 的 <div>， 其 中 第 一 个 <div> 
中 包含 一 个 按钮 、 一 个 图 片 和 一 个 包含 文字 内 容 的 <div> 元 素 ， 第 二 个 <div> 在 网 页 加 载 时 不 含 
任何 内 容 。 当 单 击 “ 复 制 ” 按 钮 时 ， 第 一 个 <div> 元 素 中 的 内 容 , 包括 HTML 标签 都 通过 html0 
方法 被 读 取 ， 然 后 再 被 html(0 方 法 插入 到 第 二 个 <div> 元 素 中 。 
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代码 4.29 通过 html() 方 法 获得 和 设置 一 个 元 素 所 包含 的 HTML 片 段 


<!1DOCTYPE html> 
<html> 
<head> 
<title>jQuery - 网 页 动态 处 理 - html () </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 


<style> 
img { 
width: 150px; 
height: auto7 


} 
.demoDiv { 
display: inline-block; 
} 
</style> 
<script> 
$ (document) .ready (function() { 
$("#button _ copy") .click(function() { 
var htmlCode = $("#one") .html() ; 
$("#two") .html (htmlCode) ; 
3 
$("#button clear") .click(function() { 
$("#two") .html (""); 
]) 7 
]) 7 
</script> 
</head> 
<body> 
<button id="button_copy"> 复 制 </button> 
<button id="button_clear"> 清 除 </button> 
<hr> 
<div id="one" class="demoDiv"> 
<button> 按钮 </button><br> 
<img src="images/whale 01.jpg" alt=" 鲸 ">><br> 
<div> 演 示 . . .</div> 
</div> 
<div id="two" class="demoDiv"> 
</div> 
</body> 
</html> 


html0 和 text0 方 法 都 能 够 读 取 一 个 HTML 元 素 的 内 容 ，html0 能 够 获得 所 包含 的 子 元 素 的 
HTML 标签 以 及 标签 中 的 属性 等 ， 而 text0 值 读 取 被 选择 的 元 素 及 其 子 元 素 的 文本 内 容 ， 并 把 
获得 的 文本 内 容 连 接 成 一 个 字符 串 。 需 要 注意 的 是 ，html(0 方 法 即使 能 够 读 取 子 元 素 的 HTML 
标签 和 元 素 属 性 ， 但 是 返回 的 结果 并 不 能 保证 与 原始 HTML 文档 在 字面 上 完全 一 致 。 如 果 一 
个 元 素 的 属性 值 是 文本 , 在 某 些 版 本 的 正 浏览 器 上 运行 html0 方 法 , 原始 文档 中 属性 值 上 的 引 
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号 可 能 被 省 略 。 
3. 插入 与 追加 


,jQuery 的 html0 方 法 能 够 替换 DOM 中 元 素 节 点 的 内 容 , jQuery 的 before0 和 after0 方 法 能 
够 实现 HTML 元 素 的 插入 和 追加 。 插 入 和 追加 的 内 容 应 该 是 一 个 HIML 代码 片段 。 

代码 4.30 在 浏览 器 中 的 初始 状态 仅 有 一 幅 如 图 4.11 中 第 一 个 画面 所 示 的 内 容 含 有 数字 “0” 
的 图 片 。 通 过 网 页 上 的 插入 和 追加 按钮 ， 分 别 在 原 有 图 片 的 最 前 列 或 者 图 片 队列 的 末尾 插入 或 
者 追加 指定 的 图 片 ， 如 图 4.11 中 第 二 个 画面 所 示 。 按 钮 上 的 数字 对 应 于 图 片上 的 数字 。 


代码 4.30 ”通过 before() 和 after() 插 入 和 追加 一 段 HTML 代 码 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery - 网 页 动态 处 理 - before()</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
var nl = '<img src="images/nl1.jpg" alt="1">'; 
Var n2 = '<img src="images/n2.jpg" alt="2">'; 
$ (document) .ready (function() { 
$("#bl") .click(function() { 
$ ("img:first") .before(n1); 
Ds 
$("#b2") .click (function() { 
$ ("img:first") .before (n2); 
]) 7 
$("#al") .click(function() { 
$ ("img:last") .after (n1); 
Ds; 
$("#a2") .click(function() { 
$("img:last") .after (n2); 
1D); 
Ws 


</script> 
</head> 
<body> 

在 队列 之 前 插入 图 片 : 


<button id="bl">1</button> 
<button id="b2">2</button><br> 
在 队列 之 后 追加 图 片 : 
<button id="al">1</button> 
<button id="a2">2</button><br> 
<hr> 
<img src="images/n0.jpg" alt="0"> 

</body> 

</html> 
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在 队列 之 前 插入 图 片 ， 
在 队列 之 后 追加 图 片 ， 


加 在 队列 之 前 插入 图 片 ， 
国 加 在 队列 之 后 追加 图 片 ， 


0 1 


图 4.11 图 片 队列 的 初始 状态 ， 以 及 在 队列 之 前 插入 “1” 与 在 在 队列 之 后 添加 “2” 


jQuery 除了 提供 before0 和 after0 方 法 外 ， 还 提供 了 insertBefore0 和 insertAfter(0 方 法 。 这 
两 组 方法 的 作用 完全 一 致 , 但 是 使 用 方法 不 同 。 在 编程 中 必须 注意 这 两 组 方法 在 用 法 上 的 区 别 。 
在 before() 方 法 中 , HTML 内 容 插入 发 生 在 由 before0 之 前 的 选择 器 表达 式 所 选 定 的 元 素 HTML 
之 前 。 而 在 使 用 insertBefore0 时 ,该 方法 之 前 的 HTML 内容 插入 到 由 insertBeforeO 的 参数 所 指 
定 的 HTML 元 素 之 前 。 因 此 ， 代 码 4.30 中 由 before0 完 成 在 操作 可 以 通过 下 面 的 方式 改写 : 


$("img:first") .before(n1l); 一 $(nl).insertBefore("img:first"); 


4.6 jQuery UI 简介 


jQuery UI 是 在 jQuery 基础 上 的 一 个 程序 库 。 开 发 jQuery Mobile 网 站 时 一 般 不 会 直接 涉及 
jQuery UI。 但 是 ， 在 jQuery Mobile 的 开发 中 ， 我 们 可 以 发 现 许多 系统 提供 的 屏幕 组 件 是 非常 
类 似 的 ， 而 且 在 编程 方法 上 也 十 分 相似 。 为 了 保持 内 容 体系 的 完整 ， 这 一 节 将 简单 介绍 jQuery 
UI 中 几 个 常用 屏幕 组 件 的 简单 用 法 。 略 过 这 一 节 ， 将 不 会 影响 jQuery Mobile 的 学 习 。 

jQuery UI 提供 了 相当 多 在 网 站 开发 中 经 常会 用 到 的 屏幕 组 件 ， 包 括 按钮 、 对 话 框 、 滑 动 
条 、 日 期 选择 器 (日 历 )、 自 动 完成 、 菜 单 、 进 度 条 、 手 风琴 、 提 示 信 息 等 。 上 述 功能 过 去 常常 
需要 JavaScript 程序 员 自 行 编写 。 由 于 这 些 功能 开发 难度 比较 大 ， 自 行 编写 会 造成 大 量 的 重复 
劳动 ， 而 且 由 于 实现 方法 各 不 相同 ， 使 其 在 后 期 维护 、 代 码 的 定制 和 再 利用 方面 的 难度 加 大 。 
使 用 jQuery UI 中 的 组 件 ， 在 很 大 程度 上 解决 了 以 上 这 些 问 题 。 

jQuery UI 组 件 在 使 用 方法 方面 都 拥有 一 个 初始 化 组 件 的 方法 ， 比 如 滑动 条 的 初始 化 方法 
是 slider0， 并 且 初 始 化 方法 中 含有 组 件 初 始 化 参数 。 初 始 化 参数 可 以 单独 赋值 ， 也 可 以 通过 一 
个 JavaScript 对 象 同时 配置 多 个 初始 化 参数 。 初 始 化 参数 因 各 种 不 同 的 组 件 而 异 。 在 初始 化 参 
数 中 还 可 以 包含 回调 方法 ， 用 于 处 理 组 件 的 产生 、 状 态 变化 等 事件 。 下 面 通过 代码 4.31， 以 一 
个 基本 的 滑动 条 组 件 来 说 明 jQuery UI 组 件 的 常规 用 法 。 


代码 4.31 一 个 基本 的 滑动 条 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery UI - slider</title> 
<meta charset="utf-8" /> 
<link href="js/jquery-ui-1.11.1/jquery-ui.min.css" rel="stylesheet"> 
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<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery-ui-1.11.1/jquery-ui.min.js"></script> 
<script> 
function scaleImage() { 
Var sliderValue = $("#scale") .slider ("value"); 
$ ("#info") .text (sliderValue); 
$(".demoImage") .css ("width", sliderValue); 
} 
var sliderOptions = { 
animate: "true", 


min: 100, 

max: 250, 

step: 1, 

value: 175, 

slide: scaleImage, 
change: scaleImage 


} 

$ (document) .ready (function() { 
$("#scale") .slider (sliderOptions); 

1D); 


</script> 
<style> 
#scale { 
width: 250px; 
;i 
img.demoImage { 
width: 175px; 
height: auto; 
} 
</style> 
</head> 
<body> 


<div id="scale"></div> 
<div id="info">175</div> 
<hr> 
<img id="whale" src="images/whale 01.jpg" alt=" 鲸 " class="demoImage"> 
</body> 
</html> 


代码 4.31 演示 了 一 个 滑动 条 的 基本 使 用 方法 。 这 个 滑动 条 的 作用 是 使 屏幕 上 图 片 的 宽度 在 
100px 和 250px 之 间 无 级 缩放 。 每 当 移 动 滑动 条 上 的 滑 块 时 ， 滑 动 条 的 当前 值 会 发 生变 化 ， 滑 
动 条 上 事先 配置 的 回调 方法 被 自动 触发 ， 并 在 回调 方法 中 完成 图 片 缩放 功能 ， 如 图 4.12 所 示 。 

阅读 这 段 代 码 时 ， 应 当 注 意 以 下 几 个 方面 : 

@ ”滑动 条 本 身 仅仅 是 一 个 <div> 元 素 。 

@ ”滑动 条 的 基本 样式 可 以 通过 常规 的 CSS 属性 来 配置 ， 比 如 代码 中 的 width: 250px; 组 

件 的 样式 可 以 根据 样式 主题 (theme) 和 定制 jQuery UI 中 特有 的 CSS 类 来 实现 。 这 与 在 
jQuery Mobile 中 的 开发 方法 基本 相同 ， 这 里 不 再 详细 介绍 。 
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@ ”如 果 同 时 配置 多 个 初始 化 参数 ， 可 以 用 一 个 JavaScript 对 象 来 实现 ， 例 如 代码 中 的 
sliderOptions。 
初始 化 参数 可 以 包含 回调 方法 的 名 称 。 
S$(‘#scale”).slider(“value”); 提 供 了 读 取 滑动 条 当前 值 的 方法 。 这 个 方法 并 不 是 固定 的 ， 
在 不 同 的 组 件 中 , 或 同一 个 组 件 的 不 同 用 法 中 ,， 读 取 的 方法 都 会 有 所 不 同 。 比 如 在 具 
有 两 个 滑 块 的 滑动 条 中 , 读 取 的 方法 就 与 此 不 同 。 编程 过 程 中 需要 查阅 相关 API 文档 
来 正确 使 用 每 一 个 方法 。 
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4.12 ”通过 滑动 条 来 控制 图 片 的 缩放 


再 以 日 期 选择 器 (日 历 ) 为 例 。 这 个 jQuery UI 组 件 同样 拥有 大 量 的 选项 。 在 默认 情况 下 ， 屏 
幕 上 显示 的 日 历 没 有 限定 日 期 的 起 止 范围 ， 但 是 ， 在 实际 应 用 环境 中 ， 例 如 旅店 预订 和 购买 车 
船 票 等 ， 都 会 有 一 个 有 效 的 日 期 范围 。 

datepicker 使 用 了 几 种 不 同 的 日 期 限定 方法 ， 代 码 4.32 演示 了 设置 minDate 和 maxDate 的 
方法 。 这 两 个 属性 能 够 接受 不 同 格式 的 数据 ， 例 如 JavaScript 的 Date 对 象 、 可 自 定 义 格式 的 字 
符 串 ， 以 及 在 代码 4.32 中 所 用 的 偏 移 量 方式 。 当 采用 偏 移 量 时 , 正 数 表示 将 来 , 负数 表示 过 去 。 
代码 4.32 中 的 起 止 日 期 分 别 是 当期 日 期 以 后 的 第 三 天 ， 以 及 一 个 月 以 后 的 第 三 天 。 


代码 4.32 日 期 选择 器 的 基本 使 用 方法 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery UI - datepicker</title> 
<meta charset="utf-8" /> 
<link href="js/jquery-ui-1.11.1/jquery-ui.min.css" rel="stylesheet"> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery-ui-1.11.1/jquery-ui.min.js"></script> 
<script> 
Var datepickerOptions = { 
minDate: ee 
maxDate: "+1M+3D" 
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$ (document) .ready (function() { 
$ ("#dateField") .datepicker (datepickerOptions); 
]) 7 
</script> 
<style> 
#ui-datepicker-div { 
font-size: 12px; 
} 
</style> 
</head> 
<body> 
<input id="dateField" type="text" name="dateField" value=""> 
</body> 
</html> 


Datepicker0 方 法 被 应 用 到 一 个 <input> 文 本 框 中 。 当 用 户 在 日 历 上 选择 了 一 个 日 期 以 后 , 被 
选择 的 日 期 自动 填写 到 文本 框 中 ， 如 图 4.13 所 示 。 


Y jQuery UI - datepicker x 
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4.13 日 期 选择 器 Datepicker 的 日 期 范围 限定 效果 


4.7 本 章 习 题 


选择 题 ( 单 选 ) 
(1) 子 元 素 过 滤器 :nth-of -typeO 中 的 索引 值 C( 。 )。 
A. 以 0 开始 
B. 以 1 开始 
C. 只 有 even 和 odd 两 个 有 效 的 索引 值 
D. 以 上 都 不 对 
(2) 以 下 哪 一 种 CSS 样式 定义 能 够 实现 jQuery 的 基本 特效 hide0? (  ) 
A. display: hide: B. visibility: hide: 
C. display: none: D. visibility: invisible: 
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过 


(6) 


0 


(8 


(9 
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关于 表达 式 $0.jquery， 下 列 哪 种 说 法 正确 ? (  ) 

A. 代表 了 jQuery0 的 简写 形式 

B. 代表 了 S$(document).ready(function0{ .… }): 结 构 的 简写 形式 

C. 返回 当前 jQuery 的 版 本 

D. 语法 错误 

关于 jQuery 的 before0 和 insertBefore()， 下 列 哪 种 说 法 正确 ?( ) 

A. 这 两 个 jQuery 方法 的 具有 相同 的 作用 

B. before0 用 于 返回 DOM 中 的 节点 ， 而 insertBeforeO 用 于 插入 节点 
CinsertBeforeO 只 能 作用 于 建立 在 XML 文档 基础 上 的 DOM 结构 
D.，before0 方 法 要 求 HTML 文档 必须 符合 XHTML 的 语法 有 效 性 条 件 
click() 方 法 能 够 (  )。 

A. 响应 键盘 上 一 个 按键 被 按 下 的 事件 

B. 响应 键盘 上 一 个 按键 被 按 下 并 弹 起 的 事件 

C. 模拟 按键 动作 

D， 模拟 鼠标 单 击 动作 

下 列 哪 一 个 关于 fadeOutO 参 数 的 描述 是 正确 的 ? ( 中 

A. 允许 不 使 用 参数 

B. 如 果 使 用 参数 ， 参 数值 只 能 是 “slow” 或 者 “fast” 

C. 参数 值 多 许 使 用 以 毫秒 为 单位 的 整数 

D. 参数 值 允 许 使 用 以 秒 为 单位 的 整数 

jQuery 的 html0 方 法 ( 起 

A. 与 text0 方 法 作用 相同 

B. 能 够 获得 被 选择 的 HTML 元 素 所 包含 的 HTML 代码 (包括 元 素 属性 ) 
C.， 能 够 获得 被 选择 的 HTML 元 素 所 包含 的 HTML 代码 (不 包括 元 素 属性 ) 
D. 仅 用 于 获得 直接 子 元 素 的 HIML 标签 

一 个 jQuery UI 的 滑动 条 使 用 了 如 下 初始 化 参数 ， 其 中 的 scaleImage 是 ( 。 )。 


var sliderOptions = { 
animate: "true", 


min: QF 

max: 1000, 

step: 2, 

value: 50, 

slide: scaleImage 
} 
A. 滑动 事件 发 生 时 的 响应 程序 
B. 滑动 动作 发 生 时 的 动画 特效 名 称 
C. 一 个 默认 的 jQuery UI 系统 命令 
D. 出 现 的 语法 错误 


对 于 下 面 代码 中 的 多 选 按钮 ， 哪 一 种 方法 可 以 正确 获得 该 按钮 是 否 被 选择 ? ( 


<input type="checkbox" name="options"” id="opl"” value=" 选 项 一 "> 


em 
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. $(‘#opl1”).prop( “checked”) 
. $(‘#opl”).attr(“checked”) 
. $(‘#opl1”).has(“checked”) 
DY 


由 于 代码 中 没有 定义 “checked” 属 性 ， 以 上 方法 都 无 法 获得 正确 结果 


(10) 在 jQuery 的 选择 器 中 ,以 下 哪 一 种 表达 式 能 够 选择 拥有 指定 属性 的 所 有 HTML 元素 ? 
并 且 要 求 属性 值 是 以 指定 的 字符 串 结 尾 。(  ) 
A. [属性 名 ^=“ 字 符 囊 ”] B. [属性 名 *=“ 字 符 囊 "] 


人 


[属性 名 $=-“ 字 符 串 ?] D.， [属性 名 ~=" 字 符 囊 ”] 
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本 章 导读 : 


本 书 前 4 章 介 绍 了 移动 网 站 开发 技术 的 发 展 与 变革 ， 以 及 开发 jQuery Mobile 
网 站 必 备 的 基础 知识 ,经 过 对 这 些 预备 知识 的 学 习 , 从 本 章 起 ,将 开始 介绍 以 jQuery 
Mobile 为 基础 的 移动 网 站 开发 技术 。 

由 于 我 们 的 重点 将 从 通用 的 Web 技术 转向 移动 Web， 从 本 章 起 的 大 部 分 实例 
程序 将 在 移动 浏览 器 的 模拟 器 中 ， 或 者 在 移动 设备 上 进行 演示 。 

本 章 的 主要 目的 ， 是 使 读者 完成 构建 jQuery Mobile 开发 的 实验 环境 ， 并 对 
jQuery Mobile 网 页 的 特点 有 一 个 基本 的 了 解 . 通过 本 章 的 学 习 , 读者 应 该 理解 常规 
jQuery Mobile 移动 网 页 的 基本 结构 和 布局 特点 ， 掌 握 jQuery Mobile 开发 的 基本 步 
又， 从 而 为 学 习 后 续 章 节 打 下 良好 的 基础 。 
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5.1 jQuery Mobile 应 用 环境 


jQuery Mobile 是 建立 在 jQuery 之 上 的 一 套 JavaScript 程 序 库 ， 它 着 眼 于 移动 浏览 器 的 特点 ， 
以 HTML 5 和 CSS 3 为 基础 ， 充 分 考虑 了 在 移动 设备 上 跨 浏 览 器 的 需求 。 同 时 ，jQuery Mobile 
框架 在 设计 上 采用 了 渐进 增强 和 自 适应 的 策略 , 使 它 能 够 按照 不 同 的 应 用 环境 得 以 最 大 限度 地 
发 挥 系统 框架 带 来 的 优势 。 当 然 ， 作 为 一 个 JavaScript 框 架 ，jQuery Mobile 也 同样 能 够 应 用 在 普 
通 桌面 浏览 器 环境 下 。jQuery Mobile 的 演示 网 站 就 是 这 样 的 一 个 实例 ? 。 

开发 jQuery Mobile 网 站 之 前 需要 做 好 下 列 准备 工作 : 有 关 开 发 jQuery Mobile 网 站 所 需 的 
程序 库 、 工 具 软 件 、 模 拟 器 ， 以 及 服务 器 等 的 下 载 与 安装 ， 可 参考 本 书 第 1 章 。 有 关 HIML 5 
的 基本 语法 和 网 页 的 基本 开发 方法 ， 可 参考 第 2 章 。 有 关 在 定制 jQuery Mobile 所 需 的 CSS 3， 
可 参考 本 书 第 3 章 。 而 关于 jQuery 选择 器 与 事件 处 理 方法 ， 则 可 参考 本 书 第 4 章 中 的 介绍 。 


5.1.1 移动 网 站 的 特点 和 需求 


开发 移动 网 站 ， 尤 其 是 为 移动 网 站 的 应 用 开发 设计 一 套 程序 库 时 ， 必 须 首先 理解 移动 网 站 
与 普通 桌面 网 站 的 差异 。 对 于 这 些 差 异 的 理解 ， 将 贯穿 在 整个 移动 网 站 设计 开发 的 过 程 中 。 经 
常会 听 到 说 某 个 网 站 是 特意 为 移动 设备 优化 的 。 但 是 , 从 一 个 普通 的 桌面 向 一 个 移动 网 站 过 渡 ， 
哪些 方面 是 必须 优化 的 呢 ? 这 些 问 题 往往 没有 一 个 确切 的 答案 。 在 网 站 设计 阶段 要 根据 业务 需 
要 和 业务 流程 优化 用 户 界面 ， 减 轻 网 络 数据 流量 ， 提 高 多 媒体 资源 加 载 速度 等 。 
如 果 单 纯 地 从 用 户 界 面 设计 来 说 ， 也 会 涉及 到 跨 移动 平台 、 跨 浏览 器 、 移 动 设备 技术 特点 
等 问题 。 在 第 1 章 中 介绍 的 网 站 设计 策略 能 在 很 大 程度 上 解决 以 上 与 用 户 界面 相关 的 问题 。 而 
且 由 于 jQuery Mobile 已 经 同时 采用 了 自 适 应 和 渐进 增强 策略 ， 当 使 用 jQuery Mobile 作为 移动 
网 站 的 基础 框架 以 后 ， 网 站 开发 的 工作 量 将 大 大 减轻 。 

屏幕 分 辨 率 是 一 个 经 常 被 忽略 , 或 者 说 是 没有 引起 足够 重视 的 问题 。 在 设置 计算 机 显示 器 
分 辩 率 的 时 候 ， 我 们 知道 ， 把 显示 器 的 分 辩 率 设置 得 越 高 ， 则 同一 个 网 页 上 文字 在 显示 器 上 的 
输出 就 会 变 得 越 小 ， 这 是 因为 网 页 上 字体 的 大 小 从 CSS 的 角度 来 看 是 固定 的 ， 当 调 高 显示 器 
分 辨 率 时 ， 单 位 长 度 上 的 像素 就 会 增多 ， 每 个 像素 所 占用 的 实际 长 度 会 相应 地 减少 ， 这 样 ， 网 
页 上 的 文字 也 就 随 之 变 小 。 这 样 的 情况 同样 适用 于 移动 浏览 器 。 当 物理 设备 的 像素 密度 非常 高 
时 (比如 超过 300PPI 的 视网膜 显示 屏 )， 普 通 16px 大 小 的 文字 就 会 非常 小 。 

图 5.1 反映 了 同一 个 网 页 在 桌面 浏览 器 和 移动 浏览 器 中 显示 的 区 别 。 由 于 Opera 移动 浏览 
器 的 模拟 器 能 够 按照 指定 设备 的 屏幕 大 小 和 分 辩 率 来 初始 化 浏览 器 窗口 , 在 测试 过 程 中 不 应 该 
随意 更 改 浏览 器 窗口 大 小 和 缩放 网 页 。 这 里 的 移动 浏览 器 模拟 了 三 星 Galaxy S II。S II 智能 手 
机 装载 了 Android 4.0 操作 系统 ， 具 有 4.8 英寸 ，720 x1280 像素 的 显示 屏 ， 像 素 密度 306PPI。 
这 样 的 分 辩 率 近似 于 20 英寸 以 上 的 计算 机 显示 器 的 中 等 分 辩 率 ， 但 是 S II 的 屏幕 显然 小 于 计 
算 机 显示 器 的 10%， 因 此 在 同等 分 辨 率 下 ， 网 页 上 的 文字 在 移动 浏览 器 中 会 非常 小 ， 以 至 于 难 
于 辨认 ， 而 在 桌面 浏览 器 上 由 于 屏幕 宽度 大 ， 则 不 会 有 这 样 的 问题 。 在 移动 网 页 的 设计 中 ， 分 
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辩 率 问题 很 容易 解决 ， 下 一 小 节 会 有 有 具体 的 介绍 。 
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5.1 同一 个 网 页 在 Chrome 桌 面 浏览 器 和 三 星 S ll Opera 浏 览 器 中 的 表现 方式 

移动 网 站 的 设计 还 需要 考虑 用 户 体验 一 致 性 的 问题 , 即 移动 网 站 的 设计 应 该 与 移动 应 用 程 
序 (通过 移动 平台 API 开发 的 程序 ) 的 操作 方法 尽量 保持 一 致 。 

例如 ， 网 页 中 常见 的 超级 链接 在 移动 应 用 程序 中 就 极 少见 到 ， 取 而 代 之 的 是 按钮 。 按 钮 能 
够 分 别 扮演 功能 按钮 和 导航 按钮 (链接 ) 两 种 角色 。 功 能 按钮 用 于 表单 发 送 ， 而 导航 按钮 用 于 完 
成 与 超级 链接 类 似 的 网 页 跳 转 等 功能 。 

图 5.2 显示 了 一 个 网 站 中 的 两 个 页 面 ， 每 个 页 面 都 含有 网 页 标题 栏 和 内 容 区 两 个 部 分 。 
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图 5.2 一 个 网 站 中 的 两 个 页 面 
网 站 的 主页 上 有 一 个 指向 第 二 页 的 按钮 ， 按 下 这 个 按钮 后 ， 网 站 跳 转 到 第 二 页 。 第 二 页 的 
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标题 栏 有 一 个 返回 前 一 页 的 按钮 。 以 上 两 个 按钮 基本 上 取代 了 原来 由 超级 链接 起 到 的 作用 。 
设计 移动 网 站 时 还 需要 考虑 其 他 许多 方面 的 问题 ， 如 避免 水 平 滚动 、 网 页 布局 简洁 ， 由 于 
屏幕 面积 所 限 ， 网 页 内 容 的 分 类 也 应 该 更 加 细致 ， 这 就 对 页 面 导航 提出 了 更 高 的 设计 要 求 。 


5.1.2 jQuery Mobile 的 基本 功能 


在 使 用 jQuery Mobile 简化 移动 网 站 开发 之 前 ， 有 必要 了 解 jQuery Mobile 框架 提供 的 主要 
功能 。jQuery Mobile 大 致 有 以 下 几 个 功能 模块 : 系统 配置 、 时 序 事件 处 理 、 网 页 结构 、 图 标 、 
样式 主题 、UI( 用 户 界面 ) 组 件 等 。 本 书 将 详细 介绍 以 上 这 些 功 能 模块 的 使 用 方法 。 

在 第 4 章 中 ， 我 们 已 经 了 解 了 jQuery 和 网 页 加 载 的 时 序 问题 。 在 移动 开发 中 ， 时 序 问题 
将 更 加 复杂 ， 因 此 ，jQuery Mobile 推出 了 更 多 的 时 序 处 理 方法 。 我 们 仍然 需要 了 解 jQuery 中 
jQuery(document).ready(function() { .… }); 这 样 的 结构 和 它 所 代表 的 意义 ， 但 是 jQuery Mobile 开 
发 过 程 中 将 使 用 其 他 与 时 序 有 关 的 方法 。 

jQuery Mobile 1.4 提供 了 如 图 5.3 所 示 的 50 个 系统 图 标 (Query Mobile 1.4 在 1.3 版 的 基础 
上 增加 了 很 多 新 的 图 标 )， 我 们 可 以 在 按钮 中 使 用 这 些 系统 图 标 ,， 例如， 图 5.2 中 的 “返回 ” 按 
钮 上 的 箭头 图 标 。 
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5.3 jQuery Mobile 1.4 中 的 标准 图 标 


除了 系统 图 标 以 外 ，jQuery Mobile 还 可 以 通过 定制 CSS 的 方法 ， 把 PNG 或 者 SVG 图 片 
转换 成 jQuery Mobile 系统 中 新 的 图 标 。 需 要 注意 的 是 ， 这 些 图 标 并 不 是 直接 通过 CSS 背景 图 
片 的 方式 成 为 图 标的 ，jQuery Mobile 对 定制 图 标 提 供 了 特别 的 方法 ， 本 书 将 在 第 10 章 中 详细 
讲解 。 

样式 主题 (theme) 是 jQuery Mobile 从 总 体 上 定制 网 站 外 观 的 最 重要 的 方法 之 一 。 样 本 
(swatch) 是 样式 主题 中 最 重要 的 概念 。 一 个 样本 由 一 系列 颜色 和 基本 CSS 样式 组 成 ， 包 括 按钮 
中 图 标的 边框 外 形 、 文 字 、 背 景 、 按 钮 和 菜单 的 颜色 ， 文 字 和 输入 框 的 阴影 按钮 和 输入 框 的 
边 角 曲 线 角度 等 。 样式 主题 由 全 局 性 的 样式 和 一 系列 样本 组 成 。 jQuery Mobile 使 用 字母 A 到 Zz 
来 标识 每 一 个 样本 ， 因 此 ， 在 正常 情况 下 ，jQuery Mobile 可 以 定制 多 达 26 个 样本 。 每 一 个 样 
本 反映 了 一 个 主题 色彩 。 比 如 在 一 个 国际 旅游 网 站 中 ， 可 以 为 每 个 国家 选择 一 种 具有 代表 性 的 
主题 色彩 ， 为 中 国 配置 以 中 国 红 为 主 色调 的 样本 ， 而 为 加 拿 大 配置 枫叶 红 ， 或 者 为 意大利 配置 
蓝 色 主 色调 等 。 同 一 个 样板 上 的 其 他 颜色 , 包括 文字 、 按 钮 、 超 级 链接 等 都 应 该 服务 于 主 色调 。 
当然 ， 每 一 个 样本 的 设置 应 该 遵从 网 站 的 需求 分 析 ， 按 照 业务 需求 来 完成 配置 ， 这 并 不 是 一 个 
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单纯 的 技术 问题 。 图 5.4 显示 了 一 个 样本 在 定制 过 程 中 的 


局 部 画面 ， 表 现 了 网 页 的 标题 栏 、 按 钮 图 标 样式 、 网 页 背 ® A 国 
景 、 按 钮 、 超 级 链接 等 。 定 制 成 以 后 ， 这 个 样本 将 被 定名 

为 A， 即 样本 网 页 标题 栏 中 的 字母 。 由 于 定制 工具 的 用 户 Body 

界面 中 含有 相当 多 的 内 容 ， 这 里 暂时 不 再 详细 介绍 定制 工 Sample text and links, 


具 的 使 用 ， 本 书 将 在 第 9 章 中 做 进一步 解答 。 对 于 jQuery 

Mobile 的 初学 者 ， 可 以 暂时 不 考虑 刻意 定制 样式 主题 ， 而 un | 
是 使 用 系统 默认 的 主题 样本 。 需 要 注意 的 是 ， 不 同 版 本 的 ReadonWistiem 

jQuery Mobile 会 提供 不 同 的 主题 样本 。 本 书 所 采用 的 
jQuery Mobile 1.4.2 提供 了 两 个 样本 ， 分 别 是 浅 色 样 本 A 
和 深 色 样本 B。 图 5.3 中 的 图 标 使 用 了 浅 色 样本 ， 当 选用 图 5.4 定制 样本 的 局 部 画面 
深 色 样本 B 时 ， 图 标 将 显示 为 图 5.5 中 的 样式 。 


中 Pal 个 RK 个 4 + yy 


5.5 深 色 样本 B 


使 用 过 jQuery Mobile 早期 版 本 的 开发 人 员 可 能 会 怀念 过 去 版 本 中 的 5 个 默认 样本 A~E。 
这 些 默认 样本 不 适用 于 产品 环境 ， 但 是 对 于 初学 者 作为 简单 演示 网 站 还 是 十 分 有 用 的 。 因 此 
jQuery Mobile 保留 了 一 个 “经 典 ” 主 题 CSS 文件 。 这 个 文件 不 在 正式 的 jQuery Mobile 的 产品 
中 ， 需 要 单独 下 载 。 另 外 ， 由 于 jQuery Mobile 不 能 保证 “经 典 ” 主 题 在 新 版 本 jQuery Mobile 
产品 中 的 兼容 性 ， 可 能 会 在 使 用 中 出 现 一 些 意 意 想不到 的 样式 错误， 因此 不 建议 把 “经 典 ” 主 题 
用 于 产品 环境 。 图 5.6 从 上 到 下 依次 演示 了 “经 典 ” 样 本 A~E。 


5.6 “经 典 ”主题 中 样本 A~E 


网 页 结构 和 UI 组件 是 jQuery Mobile 中 的 重要 成 员 。 对 于 任何 使 用 jQuery Mobile 的 网 站 
开发 人 员 ， 如 果 以 默认 方式 使 用 jQuery Mobile， 不 做 任何 定制 ， 那 么 ， 这 两 个 模块 仍然 是 无 法 
回避 的 。 

-个 网 页 的 标准 结构 分 为 标题 栏 (页 头 )、 内 容 区 和 页 尾 3 个 部 分 。 标 题 栏 的 作用 类 似 于 大 
多 数 常用 的 应 用 程序 ,起 到 简要 说 明 当 前 网 页 的 主题 内 容 的 作用 。 a 
是 由 浏览 器 的 标题 栏 显示 <head><title>.….</tile></head> 中 的 内 容 实 现 的 。 移动 设备 上 的 浏览 器 
不 一 定 显示 浏览 器 的 标题 栏 , 如 图 5.7 中 左面 的 Chrome 浏览 器 就 没有 显示 <title>...</title> 中 的 
内 容 ， 而 在 以 HIML 5 为 基础 的 混合 型 移动 程序 中 ， 浏 览 器 窗口 是 完全 隐藏 的 ， 这 个 时 候 ， 在 
网 页 上 显示 标题 栏 就 更 加 必要 。 
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图 5.7 Android 上 的 Chrome 和 Dolphin 浏 览 器 在 浏览 器 标题 栏 上 的 差异 


在 图 5.2 中 我 们 还 看 到 过 在 网 页 的 标题 栏 中 使 用 导航 按钮 的 情形 。 除 了 导航 按钮 ， 标 题 栏 
中 还 可 以 使 用 网 站 图 标 、 全 局 菜单 按钮 等 。 


用 也 


中 ， 


页 的 页 尾 通常 放置 帮助 信息 和 版 权 信息 等 。 页 尾 也 可 以 放置 一 些 必要 的 按钮 。 页 尾 的 使 


能 体现 网 站 的 业务 需求 和 网 站 设计 人 员 的 布局 理念 。 
jQuery Mobile 中 的 UI 组 件 无 疑 是 吸引 很 多 移动 网 站 开发 人 员 的 重要 因素 。 在 本 书 第 4 章 
我 们 已 经 介绍 了 jQuery UI 中 的 一 些 屏幕 组 件 ， 并 且 提 到 jQuery Mobile 的 开发 一 般 不 会 直 


接 使 用 jQuery UI 中 的 屏幕 组 件 。 实 际 上 ，jQuery Mobile 正在 逐步 移植 jQuery UI 中 的 组 件 到 
jQuery Mobile 中 。 并 预计 在 jQuery Mobile 2.0 中 , 实现 对 所 有 jQuery UI 中 的 屏幕 组 件 的 支持 。 
从 目 
不 论 是 学 习 jQuery Mobile 中 的 避 组 件 编程 ， 还 是 学 习 jQuery UI 中 的 屏幕 组 件 编程 ， 从 长 远 
发 展 


前 情况 看 ,jQuery Mobile 和 jQuery UI 中 的 组 件 具 有 很 多 相似 性 , 并 且 编 程 模式 基本 一 致 。 


眼光 看 ， 两 者 最 终 是 统一 的 。 
下 面 展 示 了 几 个 常见 的 UI 组 件 。 


到 5.8 演示 了 一 个 带 有 输入 过 滤 过 能 的 列表 ， 当 输入 “ch” 或 者 “tr” 时 ， 列 表 能 够 精简 


为 只 含有 指定 字符 串 的 列表 项 目 。 
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A 5 A 
Albania Chile Australla 
Australla China Austria 
Austria 


图 5.8 带 有 过 滤 功 能 的 列表 
图 5.9 演示 了 一 个 多 选 按钮 ， 如 果 稍 加 留意 ， 就 会 发 现 这 个 多 选 按钮 实际 上 与 浏览 器 直接 
4<input> 多 选 按钮 有 很 大 的 不 同 。 
图 5.10 演示 了 一 个 滑动 条 。 这 个 UI 组 件 与 jQuery UI 中 的 滑动 条 组 件 几 乎 完全 一 样 。 
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图 5.11 演示 了 一 个 带 有 收 放 功能 的 列表 。 列表 和 收 放 功 能 有 很 多 种 实现 方法 , 这 些 方法 各 
自 带 有 不 同 的 附加 功能 。 本 书 将 在 第 7 章 和 第 8 章 详细 介绍 这 些 UI 组件 的 编程 方法 。 


全 2013 奥 斯 卡 金 像 奖 


园 记 住 用 户 名 a 
加 2012 奥 斯 卡 金 像 奖 
最 佳 影片 奖 
5.9 多 选 按钮 最 佳 导 渍 奖 
最 佳 男 主角 奖 
| 侍女 主角 奖 
图 5.10 滑动 条 图 5.11 带 有 收 放 功能 的 列表 


5.2 jQuery Mobile 程 序 的 基本 组 织 结构 


5.2.1 网 页 结构 


-个 jQuery Mobile 网 页 在 本 质 上 就 是 一 个 HTML 5 网 页 ， 但 是 这 个 HTML 5 网 页 在 构成 
上 需要 遵守 jQuery Mobile 的 编程 规则 ,使 jQuery Mobile 系统 能 够 被 正确 运用 到 HTML 5 网 页 
上 。jQuery Mobile 必须 与 jQuery 同时 使 用 , 由 jQuery 和 jQuery Mobile 共同 完成 网 页 的 加 载 和 
-系列 在 网 页 加 载 过程 中 完成 的 初始 化 等 工作 。 在 浏览 器 中 显示 的 ， 实 际 上 是 jQuery 
Mobile 框架 处 理 过 的 网 页 ， 因 此 网 页 在 HTML 的 层次 关系 上 会 比 原始 网 页 复杂 得 
代码 5.1 是 一 个 简单 的 ， 除 了 jQuery Mobile 以 外 ， ee 


代码 5.1 一 个 简单 的 jQuery Mobile 网 页 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - 网 页 基本 结构 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 


<hl> 标 题 栏 </h1> 
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</div> 
<div class="ui-content" role="main"> 
<div> 网 页 内 容 </div> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
</body> 
</html> 


代码 5.1 虽然 简单 ， 但 这 段 代 码 已 经 包括 了 正常 运行 jQuery Mobile 所 需 具备 的 必要 条 件 。 
1. 加 载 jQuery 和 jQuery Mobile 


与 所 有 的 JavaScript 框架 (类 库 ) 一 样 ， 在 使 用 jQuery Mobile 之 前 ， 必 须 首 先 加 载 jQuery 
Mobile。 由 于 jQuery Mobile 需要 与 jQuery 一 同 运行 ， 在 加 载 jQuery Mobile 的 同时 ， 也 要 加 载 
jQuery。 下 面 3 行 代码 完 成 了 这 项 任务 : 

<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 

<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 


<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 


需要 注意 的 是 , jQuery Mobile 除了 一 个 JavaScript 文件 以 外 , 还 有 一 个 CSS 文件 必须 加 载 。 
2. 设置 虚拟 显示 窗口 


图 5.1 演示 了 由 于 现在 手机 的 高 分 辨 率 、 高 像素 密度 引出 的 字体 过 小 的 问题 。 这 个 问题 可 
以 通过 设置 viewport 轻松 地 解决 : 
<meta name="viewport" content="width=device-width，initial-scale=1.0"> 


viewport 可 以 直译 为 “观察 窗口 ”， 用 户 可 见 的 屏幕 图 像 在 这 个 观察 窗口 中 显示 。“ 观 察 
窗口 ”是 一 个 虚拟 的 显示 窗口 ， 通 常 比 手机 屏幕 大 很 多 。 当 网 页 在 一 个 很 大 的 虚拟 窗口 上 显示 
时 ， 网 页 的 内 容 被 随 之 放大 ， 网 页 用 户 就 不 会 感觉 文字 过 小 的 问题 。 

viewport 最 早出 现在 移动 版 的 Safari 浏 览 器 中 ， 后 来 被 移动 浏览 器 广泛 采用 。viewport 的 原 
理 是 根据 当前 网 页 的 显示 所 需要 的 屏幕 宽度 来 匹配 移动 设备 的 物理 像素 。viewport 理 论 还 涉及 
了 物理 像素 与 CSS 像 素 的 关系 、 对 于 Layout Viewport 的 限定 等 一 系列 原理 ， 感 兴趣 的 读者 可 以 
参考 Safari 开 发 者 文档 库 中 的 Configuring the Viewport” 和 由 Peter-Paul Koch 写 的 一 篇 比较 有 影 
响 力 的 博文 A pixel is not a pixel is not a pixel2 。 

viewport 是 优化 移动 网 站 的 第 一 步 。 当 如 代码 5.1 那样 设置 了 虚拟 显示 窗口 以 后 ， 网 页 就 
会 在 移动 设备 上 正常 显示 。 本 书 中 的 移动 网 页 都 会 添加 类 似 的 一 行 代码 。viewport 除了 在 代码 
5.1 中 所 用 的 配置 以 外 ， 还 可 以 使 用 如 下 配置 。 


Q@ 参考 文献 Configuring the Viewport，Safari Developer Library。 
@ 参考 文献 A pixel is not a pixel is not a pixel, Peter-Paul Koch, 2010-04-20。 
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initial-scale: 用 于 网 页 文档 加 载 以 后 ， 网 页 初始 显示 时 的 缩放 比例 。 
@ “user-scalable: 决定 是 否 允 许 由 用 户 手 动 缩放 网 页 。 
@ minimum-scale 和 maximum-scale: 指出 用 户 缩放 网 页 的 最 小 和 最 大 比例 。 


3. 完成 一 个 网 页 的 布局 框架 


代码 5.1 中 的 网 页 的 <body> 是 一 个 由 <div> 组 成 的 两 层 嵌 套 结构 。 
外 层 <div> 由 属性 data-role=“page” 标 识 , jQuery Mobile 将 把 这 样 的 <div> 显 示 为 一 个 在 浏览 
器 中 的 “页 面 ”: 


<div data-role="page"> 

a 

这 有 段 很 简单 的 代码 反映 了 两 个 问题 : 

@ 与 普通 网 页 每 一 个 HTML 文件 对 应 一 个 “页 面 ” 不 同 ，jQuery Mobile 在 HTML 文档 
中 通过 界定 一 个 页 面 的 范围 ， 能 够 使 同一 个 HTML 文档 同时 包含 多 个 页 面 。 

@ “data-role 不 是 HTML 5 的 标准 属性 ， 而 是 个 定制 属性 (参考 2.4.1 小 节 关 于 HTML 5 中 
定制 属性 的 描述 )。jQuery Mobile 大 量 使 用 了 定制 属性 ， 用 以 说 明 一 个 <div> 或 者 其 他 
HTML 元 素 在 jQuery Mobile 网 页 中 的 作用 。 

-个 网 页 的 内 层 结构 由 3 个 并 列 的 <div> 组 成 : 


<div data-role="header"> 

</div> 

<div class="ui-content" role="main"> 

</div> 

<div data-role="footer"> 

</div> 

前 后 两 个 <div> 分 别 通过 定制 属性 标识 为 header( 页 头 , 或 者 称 作 “标题 栏 ”) 和 footer( 页 尾 )。 
中 间 的 一 个 <div> 在 jQuery Mobile 1.4 中 使 用 了 固定 的 用 法 <div class=“ui-content” 
role=“main”>， 用 以 表示 这 个 部 分 为 网 页 页 面 的 内 容 。 这 样 的 用 法 与 jQuery Mobile 1.4 之 前 的 
版 本 中 用 data-role=“content* 标 识 网 页 内 容 有 很 大 不 同 。 开 发 人 员 在 使 用 新 版 本 jQuery Mobile 
或 者 升级 原 有 程序 的 过 程 中 ， 应 当 注 意 这 个 变化 。 

通过 上 述 3 个 步骤 ,一 个 基本 的 jQuery Mobile 网 页 就 已 经 完成 了 。 代码 5.1 在 移动 浏览 器 
中 显示 为 如 图 5.12 所 示 的 样式 。 一 个 jQuery Mobile 在 直观 上 有 以 下 特点 : 由 于 设置 了 虚拟 显 
示 窗 口 viewport， 网 页 在 移动 浏览 器 中 能 够 按照 屏幕 的 物理 像素 宽度 和 像素 密度 ， 自 动 调整 ， 
不 会 出 现 文字 过 小 的 问题 。 

这 个 网 页 的 页 面 被 分 割 成 3 个 标准 的 部 分 : 标题 栏 、 网 页 内 容 区 ， 以 及 页 尾 。 在 这 3 个 部 
分 中 ， 根 据 网 站 的 业务 需求 ， 网 页 的 标题 栏 和 页 尾 可 以 省 略 。 

图 5.12 中 , 网 页 的 标题 栏 和 页 尾 显示 为 灰色 , 而 这 段 网 页 代码 并 没有 为 网 页 设置 任何 CSS 
样式 ， 也 没有 为 这 个 网 页 应 用 任何 主题 样式 样本 。 当 jQuery Mobile 网 页 上 的 内 容 没 有 被 赋予 
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主题 样本 时 (通过 data-theme 定制 属性 赋予 ), 或 者 一 个 jQuery Mobile 的 屏幕 组 件 没 有 从 它 的 外 
层 元 素 中 继承 获得 主题 样本 (swatch) 时 , jQuery Mobile 将 
自动 应 用 主题 样本 A。 由 于 jQuery Mobile 1.4 只 有 两 个 默 
认 的 主题 样本 A 和 B, 浅 色 样本 A 被 自动 应 用 在 网 页 上 ， 
这 样 ， 就 得 到 了 图 5.12 中 的 显示 效果 。 

细心 的 读者 或 许 会 有 疑问 ， 按 照常 识 ， 网 页 的 “页 
尾 ”应 该 显示 在 浏览 器 的 底部 ， 而 不 是 紧 跟 在 网 页 内 容 
的 后 面 。 这 的 确 是 一 个 问题 ， 在 jQuery Mobile 中 ， 网 页 
的 标题 栏 (页 头 ) 和 页 尾 被 统称 为 工具 栏 (toolbanm， 工 具 栏 
有 很 多 种 用 法 ， 也 可 以 被 设置 成 不 同 的 显示 样式 和 行为 
特点 ， 本 书 将 在 第 6 章 中 全 面 介 绍 工具 栏 的 各 种 配置 和 
编程 方法 。 


5.2.2 单 页 和 多 页 模式 
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1. 多 页 模式 


代码 5.1 中 使 用 了 定制 属性 ate roles ‘pape 它 能 够 5.12 一 个 基本 的 jQuery Mobile 
把 网 页 文档 中 的 -个 <div> 片 段 显示 为 浏览 器 中 的 -个 页 网 页 与 页 面 布局 
面 。 当 一 个 网 页 文档 只 存在 一 个 data-role=“page* 时 ， 它 
只 有 一 个 可 供 显 示 的 页 面 ， 这 样 的 单 页 模式 与 我 们 平时 所 见 的 网 页 没有 什么 不 同 。 当 一 个 网 页 
中 存在 多 个 使 用 定制 属性 data-role=“page" 标 识 的 <div> 片 段 以 后 ， 这 个 网 页 文档 就 变 成 了 多 页 
模式 。 这 里 所 指 的 多 页 模式 ， 与 通过 Ajax 动态 加 载 页 面 内容 的 多 个 网 页 画面 不 同 。 

jQuery Mobile 中 的 多 页 模式 是 在 网 页 加 载 时 ， 一 个 文档 中 的 多 个 页 面 被 同时 载 入 内 存 (但 
不 是 每 一 个 页 面 都 被 初始 化 )， 这 更 近似 于 早期 WAP 网 页 的 加 载 方式 (可 参考 1.1.1 小 节 中 有 关 
WAP 1.x 网 页 加 载 的 描述 )。 

代码 5.2 是 一 个 的 典型 的 包含 有 3 个 页 面 的 HTML 5 文档 。 


代码 5.2 ”一 个 典型 的 jQuery Mobile 多 页 HTML 5 文档 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 网 页 多 页 结构 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width, 
initial-scale=1.0"> 
</head> 


<body> 
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<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true™ 
data-back-btn-text=" 返 回 "> 
<h1> 主 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="#page?2" data-role="button" data-mini="true" 
data-inline="true"> 按 钮 : 第 二 页 </a> 
<a href="#page3" data-role="button" data-mini="true" 
data-inline="true"> 按 钮 : 第 三 页 </a> 


</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
<div id="page2" data-role="page"> 


<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 第 二 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div> 第 二 页 内 容 </div> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
<div id="page3" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 第 三 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div> 第 三 页 内 容 </div> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
</body> 
</html> 


当 页 面 被 加 载 到 浏览 器 以 后 ， 文 档 中 的 第 一 个 页 面 (主页 ) 将 在 浏览 器 中 显示 。 通 过 主页 上 


的 两 个 按钮 ， 可 以 从 主页 跳 转 到 第 二 个 或 者 第 三 
页 标题 栏 中 的 返回 按钮 ， 返 回 到 主页 ， 如 图 5.13 所 示 。 


个 页 面 上 。 另 外 ， 也 可 以 通过 第 二 页 或 者 第 三 


由 于 一 个 HTML 文档 能 够 同时 包含 多 个 页 面 ， 对 于 一 个 小 型 移动 网 站 来 说 ， 就 有 了 整个 


网 站 只 有 一 个 HTML 文档 的 可 能 ， 虽 然 这 种 用 法 并 不 多 见 。 
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图 5.13 多 页 HTML 文档 和 页 面 之 间 的 跳 转 


2. 锚 点 与 链接 

网 页 中 的 多 个 页 面 自然 带 来 了 网 页 文档 内 部 的 导航 问题 。 从 代码 5.2 中 可 以 看 到 ,在 jQuery 
Mobile 网 页 中 定义 一 个 页 面 是 通过 data-role="“page” 实 现 的 ， 并 且 每 一 个 页 面 都 被 赋予 一 个 id 
值 作为 一 个 页 面 的 唯一 标识 : 


<a href="#page3" data-role="button™" 
data-mini="true" data-inline="true"> 


按钮 : 第 三 页 
</a> © Opera Mobile - Samsung es [= 
被 赋予 id 值 的 页 面 在 网 页 中 通过 “ 锚 点 (anchonD” Cr 
引用 。 锚 点 是 指向 网 页 内 部 的 一 个 超级 链接 。 在 一 个 ER 
文档 的 内 部 ， 当 在 链接 中 使 用 “#” 加 上 页 面 的 id 值 这 
时 ， 就 能 够 访问 到 一 个 新 的 页 面 ， 新 的 页 面 随即 在 浏 页 尾 


览 器 中 显示 , 就 像 我 们 在 代码 中 看 到 的 导航 按钮 一 样 。 
如 果 想 要 直接 访问 文档 中 的 第 三 页 ， 可 以 在 网 页 
的 URL 上 添加 “加 ages3”， 这 样 ，HTML 文档 中 的 第 
三 页 会 直接 显示 ， 而 不 需要 在 主页 上 点 击 导 航 按钮 。 
图 5.14 演示 了 直接 在 浏览 器 中 显示 第 三 页 时 的 情 
形 。 这 个 画面 与 图 5.13 中 的 右 图 只 有 一 处 不 同 ， 即 返 


回 按钮 没有 被 显示 。 代码 5.2 是 通过 data-add-back-btn 2 口 夯 - 
属性 由 jQuery Mobile 在 标题 栏 中 自动 添加 的 返回 按 (amang lraoveon prr: zie [Gs| [sow 可 


钮 。 这 样 的 返回 只 有 在 浏览 器 的 历史 记录 堆栈 中 存在 
前 一 个 访问 过 的 URL 时 才 会 显示 。 如 果 在 浏览 器 中 直 。。 图 5.14 在 浏览 器 中 直接 显示 的 第 三 页 
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接 显示 第 三 页 ， 这 时 浏览 器 并 没有 访问 主页 的 历史 记录 ， 返 回 按钮 就 不 会 被 自动 添加 。 
5.2.3 ”链接 与 导航 


1. 链接 的 类 型 


网 页 中 的 错 点 适用 于 一 个 含有 多 个 页 面 的 HTML 文档。 通常 ， 一 个 网 站 由 多 个 HTML 文 
档 组 成 ，jQuery Mobile 支持 像 普通 网 站 那样 实现 多 个 HTML 文档 之 间 的 链接 。 代 码 5.3、5.4 
和 5.5 模拟 了 一 个 移动 网 站 中 的 3 个 HTML 文件 。 第 一 个 文件 中 包含 3 个 页 面 , 第 二 个 文件 中 
包含 一 个 页 面 ， 第 三 个 文件 中 包含 两 个 页 面 。 访 问 所 有 的 页 面 都 是 通过 点 击 第 一 个 文件 中 主页 
上 的 按钮 实现 的 。 这 3 个 HTML 文件 的 内 容 相似 ， 看 似 十 分 繁琐 ， 但 是 它们 能 够 说 明 jQuery 
Mobile 网 页 链接 的 一 些 规律 ， 需 要 耐心 理解 。 


代码 5.3 ”第 一 个 链接 演示 文件 : jqm_nav_doc1.html 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 网 页 导航 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 


<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"> 
</script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 主 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="#page2" data-role="button" data-mini="true" 
data-inline="true"> 按 钮 第 二 页 </a> 
<a href="#page3" data-role="button" data-mini="true" 
data-inline="true"> 按 钮 :第 三 页 </a> 
<br> 
<a href="jqm nav doc2.html" data-role="button" 
data-mini="true" data-inline="true"> 
按钮 : 第 四 页 </a> 
<br> 
<a href="jqm nav_doc3.h " data-role="button™" 
data-mini="true" data-inline="true"> 
按钮 : 第 五 页 </a> 
<!-- 下 面 的 链接 在 网 页 中 无 效 --> 
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<a href="jqm nav doc3.htmi#page6" data-role="button" 
data-mini="true" data-inline="true"> 
按钮 : 第 六 页 </a> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
<div id="page2" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 第 二 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div> 第 二 页 内 容 </div> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
<div id="page3" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 第 三 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div> 第 三 页 内 容 </div> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
</body> 
</html> 


代码 5.4 第 二 个 链接 演示 文件 : jqm_nav_doc2.html 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 网 页 导航 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"> 
</script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width, 


initial-scale=1.0"> 
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</head> 
<body> 
<div id="page4" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 第 四 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div> 第 四 页 内 容 </div> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
</body> 
</html> 


代码 5.5 ”第 三 个 链接 演示 文件 : jqm_nav_doc3.html 


<!DOCTYPE html> 

<html> 

<head> 
<title>jQuery Mobile - 网 页 导航 </title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"> 


</script> 


<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 


rel="stylesheet"/> 


<meta name="viewport" content="width=device-width, initial-scale=1.0"> 


</head> 
<body> 
<div id="page5" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 第 五 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div> 第 五 页 内 容 </div> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
<div id="page6" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 第 六 页 </h1> 
</div> 
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<div class="ui-content" role="main"> 
<div> 第 六 页 内 容 </div> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
</body> 
</html> 


上 述 3 个 HTML 文件 在 锚 点 的 基础 上 增加 了 对 其 他 HTML 文件 的 链接 。 在 第 一 个 文件 
jqm _nav_docl.html 中 一 共 出 现 了 5 个 链接 。 却 age2 和 #page3 指向 文件 内 部 的 锚 点 ， 目 的 在 于 
实现 一 个 HTML 文档 内 部 的 页 面 跳 转 。hre 仁 *jqm_nav_doc3.html" 指 向 第 二 个 HTML 文件 ， 而 
第 二 个 HTML 文件 是 一 个 单 页 文档 , 当 一 个 链接 指向 一 个 包含 单 页 文档 结构 的 HTML 文件 时 ， 
文档 中 的 唯一 一 个 页 面 被 显示 出 来 。hre 伍 “jqm_nav_doc3.html” 指 向 第 3 个 HTML 文件 ， 但 是 
jqm_nav_doc3.html 是 一 个 包含 多 页 结构 的 HTML 文件 , 当 一 个 链接 指向 一 个 jQuery Mobile 包 
含 多 页 文档 的 HTML 文件 时 ,文档 中 的 第 一 个 页 面 被 显示 出 来 。 最 后 一 个 链接 
jqm_nav_doc3.html#page6 指向 第 3 个 文件 中 的 一 个 页 面 。 从 上 一 小 节 中 , 我 们 知道 在 浏览 器 上 
直接 访问 一 个 网 页 中 的 某 一 个 页 面 是 可 行 的 ， 但 是 ， 如 果 一 个 jQuery Mobile 链接 直接 指向 一 
个 文件 中 的 一 个 页 面 ， 却 不 会 有 任何 作用 。 原 来 ，jQuery Mobile 在 默认 情况 下 是 通过 Ajax 来 
把 另 一 个 HTML 网 页 中 的 页 面 内 容 送 到 浏览 器 中 用 于 显示 的 。 在 jQuery Mobile 中 ， 目 前 Ajax 
只 限于 获取 多 页 结构 中 的 第 一 个 页 面 ， 当 链接 中 的 URL 指向 其 他 页 面 时 ，jQuery Mobile 无 法 
加 载 指定 的 页 面 到 浏览 器 中 。 

在 jQuery Mobile 中 使 用 链接 还 有 其 他 一 些 比较 特殊 的 情况 。 例 如 ， 当 一 个 链接 指向 一 个 
目录 ， 而 不 是 指向 这 个 目录 下 的 index.html 时 ，URL 必须 以 “/” 结 尾 才能 使 链接 正常 工作 。 
还 有 一 种 特殊 情况 发 生 在 返回 按钮 上 。 当 一 个 链接 被 属性 data-rel=“back” 修 饰 以 后 ， 链 接 中 的 
原 有 URL 失效 ， 被 返回 功能 取代 。 

代码 5.6 演示 了 一 个 含有 外 部 链接 的 实例 。 一 个 导航 按 原 本 指向 “雅虎 ”网 站 ， 按 钮 被 赋 
予 属性 data-rel=“back” 以 后 ， 它 的 实际 作用 就 变 得 与 标题 栏 中 的 “返回 ”按钮 一 样 ， 原 来 的 链 
接 不 再 有 效 。 


代码 5.6 ”data-rel=“back” 覆 盖 一 个 链接 的 原 有 URL 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - “返回 ”按钮 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width, 
initial-scale=1.0"> 
</head> 
<body> 
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<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 主 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="#page2" data-role="button" data-mini="true" 
data-inline="true"> 按 钮 : 第 二 页 </a> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
<div id="page2" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 第 二 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<qdiv> 第 二 页 内 容 </div> 
<div> 
<a href="http://www.yahoo.com" data-role="button" 
data-rel="back">Yahoo!</a> 
</div> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
</html> 


2. Ajax 与 链接 


jQuery Mobile 在 网 页 切换 的 过 程 中 会 自动 加 入 页 面 过 渡 效 果 。 页面 过 渡 效 果 是 一 种 旧 的 页 
面 移出 屏幕 ， 新 的 页 面 移 入 屏幕 的 动画 特效 ， 为 了 使 在 加 载 外 部 网 页 (同一 个 网 站 的 另外 一 个 
HTML 文件 ) 时 也 能 具有 和 内 部 网 页 (同一 个 HTML 文件 中 的 若干 个 页 面 ) 一 样 的 切换 效果 ， 
jQuery Mobile 会 利用 链接 中 的 URL 形成 一 个 Ajax 请 求 ， 并 通过 Ajax 方式 加 载 外 部 HTML 网 
页 中 的 页 面 。 如 果 外 部 HTML 网 页 包含 了 多 个 页 面 ， 其 中 只 有 第 一 个 页 面 会 被 加 载 ， 而 其 他 


页 面 无 法 加 载 。 
关于 Ajax 方法 ， 网 页 加 载 过 程 描述 中 使 用 的 “外 部 网 页 ”是 针对 网 页 自身 所 在 的 


网 站 而 


言 的 ， 而 对 于 处 于 另外 一 个 域名 下 的 网 站 ，jQuery Mobile 则 不 会 使 用 Ajax 方法 ， 而 是 直接 使 


用 普通 网 页 的 超级 链接 访问 方式 。 
代码 5.7 通过 如 图 5.15 所 示 的 3 组 按钮 演示 了 在 不 同情 况 下 页 面 载 入 过 程 的 差异 。 


代码 5.7 ”页 面 载 入 过 程 的 演示 程序 


<!DOCTYPE html> 
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<html> 
<head> 
<title>jQuery Mobile - Ajax 页 面 加 载 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width, 
initial-scale=1.0"> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 主 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div> 默 认 </div> 
<a href="jqm ajax doc2.html" data-role="button" 
data-mini="true" data-inline="true" 


data-transition="slide"> 
按钮 : 第 二 页 
</a> 
<a href="http://www.tsinghua.edu.cn/" data-role="button" 
data-mini="true" data-inline="true" 
data-transition="slide"> 
清华 大 学 
</a> 
<br> 
<div> 取 消 AJAX 页 面 加 载 </div> 
<a href="jqm ajax doc2.html" data-role="button" 
data-mini= 


true" data-inline="true" 

data-transition="slide" data-ajax="false"> 
按钮 : 第 二 页 

</a> 

<br> 

<div> 标 注 外 部 网 站 </div> 

<a href="jqm ajax doc2.html" data-role="button" 
data-mini="true" data-inline="true" 


data-transition="slide" rel="external"> 
按钮 : 第 二 页 
</a> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
</body> 
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</html> 


一 个 指向 本 网 站 的 另外 一 个 网 页 文件 链接 在 默认 情况 下 通过 Ajax 载 入 新 的 页 面 ， 在 页 面 
载 入 的 过 程 中 , 会 自动 添加 默认 的 页 面 切 换 效 果 , 或 者 应 用 由 网 页 开发 人 员 指 定 的 页 面 切换 效 
果 。 因 此 ， 当 按 一 下 第 一 行 按钮 中 指向 第 二 页 的 按钮 时 ， 可 以 看 到 页 面 从 右 向 左 移动 的 切换 效 
果 。 但 是 在 第 一 行 按钮 中 ， 由 于 清华 大 学 的 URL 和 当前 网 站 分 别处 于 两 个 不 同 的 域 (domain)， 
当 点 击 “ 清 华 大 学 ”按钮 时 ，jQuery Mobile 按照 常规 超级 链接 的 处 理 方式 ， 不 再 使 用 Ajax， 
也 没有 在 页 面 切换 过 程 中 添加 动画 效果 。 测 试 网 页 上 的 第 二 行 按钮 仍然 指向 第 二 个 测试 页 面 ， 
<a> 元 素 中 使 用 了 data-ajax=“false”, 这 里 , data-ajax 属性 用 于 通知 jQuery Mobile 是 否 使 用 Ajax 
方式 载 入 页 面 。 当 属性 值 为 false 时 ， 即 要 求 对 当前 链接 暂停 使 用 Ajax， 因 而 也 不 会 有 网 页 过 
渡 动 画 效果 。 点 击 网 页 上 的 第 3 行 按 钮 ， 同 样 也 是 指向 第 二 个 测试 页 面 ， 但 是 在 <a> 元 素 中 使 
用 了 rel=“exteral”， 这 是 一 个 在 HTML 5 中 新 增加 的 功能 ， 用 于 指明 当前 链接 指向 的 网 站 不 属 
于 当前 网 页 所 在 网 站 。 因 此 ， 当 一 个 链接 被 rel-“external "修饰 以 后 ，jQuery Mobile 就 会 把 链接 
指向 的 URL 当 作 其 他 网 站 来 处 理 ， 在 网 页 切换 过 程 中 ， 不 会 使 用 Ajax， 也 不 会 添加 页 面 过 渡 
动画 效果 。 

Ajax 交互 过 程 需要 使 用 Web 服务 器 返回 的 HTTP 状态 代码 。 如 果 不 通过 Web 服务 器 ， 而 
直接 在 浏览 器 中 加 载 页 面 ， 当 通过 一 个 链接 访问 另 一 个 HTML 文件 时 ， 会 发 生 页 面 载 入 错误 ， 
如 图 5.16 所 示 。 如 果 一 个 链接 不 使 用 Ajax， 例 如 ， 图 5.16 中 的 第 二 行 和 第 三 行 按钮 ， 则 不 会 
发 生 这 种 错误 。 由 于 网 站 最 终 将 部 署 到 一 个 Web 服务 器 上 ， 上 述 Ajax 错误 应 该 只 会 发 生 在 测 
试 环境 中 。 


localhosVCHo5iqm_ 引 坟 轩 sooge ] fleynlocalhosVCyDocu 支 轩 sooge ] 
主页 主页 
冉 认 昧 认 
按 馈 :第 二 页 | 清华 大 学 | | 按 馈 : 第 二 页 清华 大 学 
取消 AJAX 页 面 加 NA 
控 由 :第 机 搞 思 :村 页 
标注 外 部 网 站 Error Loading Page 
搜 乌 : 第 页 一 
页 尾 页 尾 


oa 
图 5.15 页 面 载 入 演示 主页 上 的 三 组 按钮 图 5.16 Ajax 页 面 载 入 错误 
5.2.4 ”对 话 窗口 


从 jQuery Mobile 1.4 开始 ， 对 话 窗口 的 编程 模式 与 以 前 相 比 发 生 了 显著 的 改变 ， 对 话 窗口 
在 当前 版 本 中 可 以 理解 为 一 个 特殊 的 页 面 。 在 以 下 介绍 中 ,我们 只 需要 注意 网 页 的 基本 组 成 结 
构 ， 而 不 需要 过 多 注意 网 页 的 布局 方式 。 
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1. 新 的 对 话 窗口 编程 模式 


新 的 对 话 窗口 实现 方式 相当 简单 ， 只 需要 稍微 修改 一 个 普通 HTML 5 网 页 即 可 。 
代码 5.8 中 含有 两 个 页 面 。 第 一 个 主页 面包 括 了 一 个 按钮 ， 用 于 弹出 对 话 窗口 。 第 二 个 页 
面 实现 了 一 个 对 话 窗口 ， 与 普通 页 面相 比 ， 它 只 是 增加 了 一 个 属性 data-dialog=“true”。 


代码 5.8 通过 data-dialog 属 性 定义 一 个 对 话 窗口 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 对 话 窗口 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 对 话 窗口 演示 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="#confirmDialog" data-role="button" data-mini="true" 
data-inline="true"> 确 认 </a> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
<div id="confirmDialog" data-role="page" data-dialog="true"> 
<div data-role="header"> 
<h2> 确 认 </h2> 
</div> 
<div class="ui-content" role="main"> 
<h2> 请 确认 订单 ? </h2> 
<div class="ui-grid-a"> 
<div class="ui-block-a"> 
<a href="#home" id="confirmBtn" data-role="button" 
data-mini="true"> 
确认 订单 
</a> 
</div> 
<div class="ui-block-b"> 


<a href="#home" id="cancelBtn" data-role="button™ 
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data-mini="true"> 
取消 订单 
</a> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


当 jQuery Mobile 显示 这 样 的 页 面 时 ， 网 页 不 会 全 屏 显示 ， 两 端 会 有 一 定 间距 ， 而 且 这 个 
网 页 会 显示 在 最 上 层 ( 离 用 户 最 近 的 一 个 显示 层 )， 部 分 遮挡 原来 的 网 页 ， 如 图 5.17 所 示 。 


GD GD 
对 话 窗 口 演示 6© ee 
确认 
请 确认 订单 
页 尾 
确认 订单 取消 订单 


4 > 口 避 
图 5.17 对话 窗口 
-个 被 解析 为 对 话 窗口 的 页 面 会 自动 地 在 网 页 的 标题 栏 部 分 显示 一 个 关闭 按钮 , 用 以 返回 
原来 的 页 面 。 启 动 对 话 窗口 也 很 简单 ， 与 普通 页 面 的 链接 是 完全 一 致 的 。 
代码 5.8 演示 的 是 对 话 窗口 的 一 种 实现 方法 ， 对 话 窗口 也 能 通过 弹出 窗口 ， 即 UI 组 件 中 
的 Popup 实现 。 相 关 方 法 将 在 第 8 章 中 与 其 他 UI 组 件 一 起 介绍 。 
2. 传统 的 对 话 窗口 (即将 被 取消 ) 


下 面 介 绍 的 对 话 窗口 实现 方法 在 jQuery Mobile 1.4 中 仍然 有 效 ， 但 是 这 种 方法 将 会 从 
jQuery Mobile 1.5 中 删除 。 这 一 部 分 内 容 仅 供 读者 在 需要 做 移动 网 站 升级 等 工作 时 参考 。 

传统 的 对 话 窗口 同样 是 一 个 jQuery Mobile 网 页 ， 并 且 这 个 网 页 与 其 他 jQuery Mobile 普通 
网 页 一 样 ， 不 需要 通过 属性 额外 地 说 明 。 然 而 ， 调 用 对 话 窗 口 的 链接 必须 用 data-rel="dialog” 
加 以 说 明 。 

代码 5.9 反映 一 个 对 话 窗 口 的 传统 调用 方法 。 它 的 实际 静态 显示 效果 与 图 5.17 一 致 。 在 一 
些 浏览 器 上 ， 使 用 传统 的 对 话 窗口 在 程序 运行 过 程 中 可 能 会 遇 到 一 些 动画 效果 不 够 顺畅 等 问 
题 。 在 开发 实践 中 ， 我 们 建议 使 用 新 的 对 话 窗口 编程 模式 ， 或 者 使 用 UI 组 件 中 的 弹出 窗口 。 
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每 一 种 编程 方法 都 有 它 的 优势 和 局 限 性 , 在 网 站 开发 中 要 按照 网 站 的 业务 需求 来 合理 选择 某 一 


种 编程 方法 。 
代码 5.9 通过 data-rel 属 性 定义 一 个 传统 对 话 窗口 的 链接 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 对 话 窗口 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 


"home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 对 话 窗口 演示 </h1> 
</div> 
<div class="ui-content" role="main"> 


<a href="#confirmDialog" data-role="button" data-mini 
data-inline="true" data-rel="dialog"> 
确认 
</a> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
<div id="confirmDialog" data-role="page"> 
<div data-role="header"> 
<h2> 确 认 </h2> 
</div> 
<div class="ui-content" role="main"> 
<h2> 请 确认 订单 ? </h2> 
<div class="ui-grid-a"> 
<div class="ui-block-a"> 
<a href="#home" id="confirmBtn" data-role="button" 
data-mini="true"> 
确认 订单 
</a> 
</div> 
<div class="ui-block-b"> 
<a href="#home" id="cancelBtn" data-role="button™ 
data-mini="true"> 


取消 订单 
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</a> 
</div> 
</div> 
</div> 
</div> 
</body> 


5.3 ”屏幕 切换 动画 特效 


jQuery Mobile 支持 与 普通 网 页 一 样 的 网 页 载 入 方式 ， 也 支持 通过 Ajax 实现 网 页 加 载 的 方 
式 。 当 采用 Ajax 方式 时 ，jQuery Mobile 还 会 自动 应 用 网 页 切换 的 动画 特效 (transition)。 在 默认 
情况 下 ， 指 向 一 个 网 页 内 部 其 他 页 面 的 链接 ,或 者 指向 本 网 站 其 他 网 页 文件 的 链接 ， 将 被 自动 
转换 为 Ajax 加 载 方式 , 而 被 data-ajax="false” 或 者 rel=“extemal" 修 饰 的 链接 则 不 会 采用 Ajax 方 
式 ， 也 不 会 被 添加 任何 网 页 切换 动画 特效 。 
jQuery Mobile 1.4 一 共 提 供 了 表 5.1 中 列举 的 10 种 标准 的 页 面 切换 动画 ， 每 一 种 动画 都 有 
-个 名 称 。 在 网 页 的 链接 中 ， 把 动画 效果 的 名 称 赋予 <a> 元 素 的 data-transition 属性 ， 就 能 为 一 
个 链接 指定 动画 效果 ， 前 提 是 这 个 链接 必须 符合 jQuery Mobile 自动 把 链接 转换 成 Ajax 加 载 方 
式 的 条 件 。 


表 5.1 jQuery Mobile 1.4 中 的 10 种 页 面 切换 动画 效果 


动画 效果 名 称 说 明 

fade 默认 值 。 淡 入 淡出 效果 

flip 以 纵向 中 心 线 为 轴 翻 转 

turmn 书本 翻 页 效果 

flow 漂浮 效果 

slidefade 旧 的 页 面 内 从 屏幕 左 侧 移出 并 伴随 着 淡出 效果 ， 新 的 页 面 以 淡 入 效果 出 现 
slide 新 的 页 面 从 屏幕 右 侧 移入 

slideup 上 移 效 果 

slidedown 下 移 效 果 

none 不 使 用 动画 效果 


由 于 对 话 窗 口 本 身 也 是 一 个 网 页 , 所 以 data-transition 属性 同样 适用 于 对 话 窗 口 。 代 码 5.10 
中 包含 了 两 个 链接 按钮 ， 其 中 第 一 个 按钮 指向 同一 个 网 站 下 的 另 一 个 HTML 文件 ， 网 页 切换 
效果 为 “slide”， 第 二 个 链接 按钮 指向 一 个 包含 对 话 窗口 的 HIML 网 页 文件 ， 网 页 的 切换 效果 
为 “pop”。 

代码 5.10 ”页 面 切换 动画 效果 演示 


<!DOCTYPE html> 
<html> 
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<head> 
<title>jQuery Mobile - AJAX 页 面 加 载 - 页 面 切换 动画 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 主 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="jqm ajax doc2.html" data-role="button" 
data-mini="true" data-inline="true" 
data-transition="slide"> 
按钮 : 第 二 页 
</a> 
<a href="jqm transition dialog.html" data-role="button" 
data-mini="true" data-inline="true" 
data-transition="pop"> 
按钮 : 对 话 窗口 
</a> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
</body> 
</html> 


页 面 切换 动画 分 为 两 个 步骤 ， 原 来 的 页 面 退出 屏幕 和 新 的 页 面 进入 屏幕 。 

上 述 动画 效果 从 字面 上 并 不 能 完全 反映 移出 和 移入 的 确切 效果 , 比如 上 述 两 个 步骤 中 的 一 
个 可 能 采用 了 淡 入 淡出 而 不 是 移动 。 另 外 ， 页 面 切换 还 有 一 个 对 应 的 反 向 过 程 ， 反 向 过 程 也 不 

- 定 完全 与 切换 过 程 绝对 相反 ,但 从 视觉 效果 上 来 看 , 动画 名 称 基 本 上 能 够 说 明 实 际 动 态 视觉 

效果 ， 而 不 会 引起 歧义 。 

jQuery Mobile 的 页 面 切 换 特效 的 基础 是 CSS 二 维和 三 维 变 换 ， 以 及 CSS 动画 技术 。CSS 
易于 修改 和 扩充 ， 这 是 CSS 的 一 大 便利 特色 ,但 是 CSS 也 受制 于 浏览 器 的 支持 程度 。 

jQuery Mobile 页 面 切换 动画 在 Chrome 和 Safari 等 以 WebKit 为 核心 的 浏览 器 上 能 够 正常 
执行 ， 但 是 ， 在 某 些 浏览 器 上 还 不 被 支持 ， 或 者 不 能 很 好 地 完成 预期 的 动画 效果 ， 还 可 能 出 现 
动画 延迟 、 停 顿 和 闪烁 等 意 想不到 的 结果 ， 因 此 ， 很 有 必要 了 解 在 使 用 页 面 切换 动画 特效 的 过 
程 中 的 一 些 制约 条 件 。 
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5.4 本 章 习 题 


选择 题 ( 单 选 ) 

(1) 由 于 HTML 语法 的 兼容 性 , jQuery Mobile 网 页 可 以 通过 HTML 4.01 语法 编写 .(  ) 
A. 对 
B. 错 

(2) 怎样 才能 使 一 个 内 部 链接 具有 页 面 切换 动画 效果 ? (  ) 


A. 默认 情况 下 ， 内 部 链接 会 被 自动 添加 动画 切换 效果 
B. 使 用 data-ajax 属性 添加 动画 效果 
C. 使 用 data-transition 属性 ， 并 赋予 一 个 有 效 的 动画 属性 值 
D. 以 上 都 不 对 
(3) 在 下 面 的 语句 中 ， 哪 一 个 适用 于 定义 jQuery Mobile 网 页 的 正文 内 容 部 分 ? (  ) 
A. <div class="“ui-content” role=“main”> 
B. <div data-role="“content”> 
C. <div data-role=“page-content” role=“main”> 
D. <div class="content” role=“main”> 


(4) 在 jQuery Mobile 1.4 中 ， 一 个 以 页 面 为 基础 的 对 话 窗 口 (  )。 
A.， 必须 是 网 页 文档 中 的 一 个 内 部 页 面 
B. 必须 是 网 站 内 部 的 另外 一 个 HIML 文档 
C. 可 以 是 网 页 文档 中 的 一 个 内 部 页 面 
D. 可 以 是 网 站 中 的 另外 一 个 HTML 文档 ， 但 必须 采用 传统 对 话 窗口 编程 方法 
(5) 下 列 哪 一 种 方法 可 以 在 一 个 HTML 文档 中 定义 一 个 jQuery Mobile 页 面 ?(  ) 
A. page-role="“page” B. role=“page” 
C. data-role="“page” D. data-role="ui-page” 
(6) 下 列 哪 一 关于 页 面 切换 动画 效果 (transition) 的 描述 是 正确 的 ? (  ) 
A. “none” 是 一 个 有 效 的 data-transition 属性 值 
B.， data-transition 的 默认 属性 值 是 “slide” 
C.， 必须 对 data-transition 属性 赋予 一 个 有 效 的 动画 名 称 ， 才 能 产生 动画 效果 
D. 由 于 data-transition 属性 对 于 页 面 载 入 和 移 除 同样 有 效 ， 两 个 过 程 的 动画 效果 是 完 
全 一 样 的 
(7) jQuery Mobile 框架 提供 了 多 少 种 主题 样本 (swatch)? ( ) 
A. 0 B. 2 人 1 D. 26 
(8) 如 果 不 使 用 Web 服务 器 ， 通 过 一 个 HTML 文档 中 的 一 个 链接 按钮 访问 另 一 个 HTML 
文档 ( js 


A. 在 任何 情况 下 都 无 法 访问 ， 网 页 不 报错 
B. 在 任何 情况 下 都 无 法 访问 ， 网 页 报告 由 Ajax 错误 引发 的 错误 信息 
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GC 
D. 


如 果 暂 停 Ajax 加 载 ， 则 可 以 访问 
在 任何 情况 下 都 可 以 正常 访问 


(9) 开发 jQuery Mobile 1.4 网 页 ， 除了 在 网 页 上 加 载 jQuery Mobile 的 系统 JavaScript 和 
CSS 外 ， 还 必须 ( 。 )。 


A. 
B. 
GC; 
D. 


加 载 jQuery 框架 的 JavaScript 和 CSS 文件 

加 载 jQuery 系统 中 文件 名 带 有 min 的 JavaScript 文件 
加 载 jQuery Mobile 经 典 样 式 

加 载 适当 版 本 的 jQuery 框架 


(10) 下 面 的 代码 在 Chrome 桌面 浏览 器 中 显示 为 ( )。 


<a href="http://www.google.com" data-role="button" data-mini="true" 
data-inline="true">Google</a> 


A. 
B. 按钮 

各 

D. 无 法 显示 ， 因 为 使 用 了 jQuery Mobile 专用 属性 ， 仅 适用 于 移动 浏览 器 


超级 链接 


只 有 把 Chrome 设置 为 移动 浏览 器 模式 才 会 显示 按钮 


人 Ar on ey 
昨 6 和 草 
UI 组 件 - 工具 栏 


本 章 导读 : 


本 书 的 第 6 章 、 第 7 章 和 第 8 章 将 重点 介绍 jQuery Mobile 中 的 各 种 UI 组件 。 

jQuery Mobile 的 工具 栏 包括 标题 栏 (页 头 ) 和 页 尾 两 个 部 分 ， 这 两 个 部 分 虽然 不 
是 jQuery Mobile 网 页 必须 包含 的 成 员 ， 但 却 是 在 网 页 布局 的 三 个 基本 组 成 结构 中 
十 分 常见 的 部 分 。 本 章 将 讲解 jQuery Mobile 网 页 中 这 两 个 基本 成 员 的 布局 特点 、 
内 容 安排 和 样式 设计 等 方法 , 以 及 工具 栏 与 网 页 导航 栏 的 关系 等 ,通过 本 章 的 学 习 ， 
读者 将 对 jQuery Mobile 网 页 结构 有 进一步 的 了 解 。 
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6.1 工具 栏 基础 


-个 jQuery Mobile 移动 网 页 通常 有 标题 栏 、 正 文 内 容 和 页 尾 三 个 基本 组 成 部 分 ， 如 图 6.1 
所 示 。 在 这 三 个 组 成 部 分 中 ， 只 有 正文 内 容 是 必需 的 ， 它 反映 了 网 页 的 实际 业务 需求 ， 网 页 的 
标题 栏 (页 头 ) 用 于 显示 网 页 标题 和 网 页 导航 , 页 尾 用 于 安排 版 权 信息 和 帮助 信息 等 的 链接 按钮 。 
页 头 和 页 尾 两 个 部 分 被 统称 为 工具 栏 (toolbars)。 


localhost/CH06/jqm_to 高 [Google | 


工具 栏 演示 


网 页 正文 内 容 


6.1 一 个 常规 网 页 上 的 三 个 基本 组 成 部 分 


6.1.1 工具 栏 的 组 成 结构 


本 书 第 5 章 介绍 了 jQuery Mobile 网 页 文档 的 基本 结构 。 大 部 分 网 页 在 页 面 布局 上 都 包括 
了 三 个 标准 部 分 。 在 网 页 的 演示 代码 中 ， 我 们 很 容易 看 到 jQuery Mobile 在 很 大 程度 上 利用 了 
HTML 5 的 定制 属性 “data-* ”， 用 于 定义 jQuery Mobile 网 页 中 的 构造 结构 和 样式 特征 ， 例 如 
data-role=“page”， 或 者 data-theme=“b" 等 。 同 样 ， 工 具 栏 作为 网 页 基本 组 成 结构 的 一 部 分 ， 也 
是 通过 HTML 5 的 定制 属性 进行 定义 的 。 

读者 对 于 代码 6.1 应 该 不 会 陌生 。 这 段 代 码 代 表 了 jQuery Mobile 网 页 的 基本 结构 ,并且 除 
了 基本 结构 以 外 ， 没 有 包含 其 他 具体 内 容 。 

从 代码 结构 上 ， 可 以 很 清楚 地 看 到 工具 栏 的 定义 方法 。 工 具 栏 中 的 页 头 和 页 尾 都 是 由 一 个 
<div> 元 素 构成 ， 并 分 别 由 data-role= “header" 和 data-role= footer 修饰。jQuery Mobile 在 初始 化 
页 面 时 ， 会 赋予 工具 栏 相 应 的 样式 和 行为 特征 ， 就 像 从 图 6.1 中 看 到 的 那样 ， 页 头 和 页 尾 被 分 
别 赋予 了 背景 颜色 (由 主题 样式 的 样本 决定 )， 并 且 工 具 栏 中 的 字体 大 小 也 与 网 页 其 他 部 分 中 的 
字体 不 同 。 这 些 样式 和 行为 特征 将 在 本 章 稍 后 介绍 。 
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代码 6.1 jQuery Mobile 网 页 的 基本 结构 和 工具 栏 的 定义 方法 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 工具 栏 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div id="myPage" data-role="page"> 
<div data-role="header"> 
<h1> 工 具 栏 演示 </h1> 
</div> 
<div class="ui-content" role="main"> 
<qdiv> 网 页 正文 内 容 </div> 
</div> 
<div data-role="footer"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
</body> 
</html> 


6.1.2 工具 栏 的 显示 方式 


1. 工具 栏 的 默认 显示 方式 


在 第 5 章 中 ， 我 们 就 有 这 样 的 疑问 ， 从 图 6.1 来 看 ， 页 尾 应 该 显示 在 浏览 器 的 底部 ， 这 样 
似乎 才 更 加 合理 ， 并 且 也 能 真正 体现 “footer” 的 含义 。 但 是 ， 正 如 普通 网 页 中 的 <div> 元 素 一 
样 ， 每 一 个 块 级 元 素 (Block-level Element) 都 是 依次 出 现在 网 页 上 ， 后 一 个 块 级 元 素 显示 在 前 一 
个 块 级 元 素 的 下 一 行 。 除 了 浏览 器 对 HTML 元 素 赋予 的 默认 样式 使 块 级 元 素 具有 的 间隙 之 外 ， 
元 素 之 间 不 会 刻意 产生 间隙 ， 使 一 个 元 素 显 示 在 浏览 器 窗口 的 某 一 个 位 置 。 这 也 正 是 在 默认 情 
况 下 jQuery Mobile 网 页 中 工具 栏 在 浏览 器 中 的 显示 方式 。 在 这 种 默认 的 显示 方式 下 ， 页 头 、 
正文 和 页 尾 按照 在 HTML 文档 中 的 顺序 依次 显示 在 浏览 器 上 ， 这 些 网 页 的 基本 构件 之 间 没 有 

当 网 页 中 的 正文 长 度 超过 了 设备 上 一 屏 所 能 容纳 的 内 容 后 , 浏览 器 会 自动 显示 一 个 垂直 滚 
动 条 ， 帮 助 滚屏 以 显示 全 部 网 页 内 容 。 当 屏幕 内 容 垂 直 滚动 时 ， 工 具 栏 中 的 页 头 和 页 尾 会 随 之 
滚动 。 图 6.2 演示 了 Nexus 4 中 的 Chrome 浏览 器 在 网 页 正文 滚动 时 ， 连 带 页 头 和 页 尾 一 起 滚 
动 的 实际 效果 。 
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jam.webhop.me, 


工具 栏 演示 


网 页 正文 内 容 


页 尾 


图 6.2 ”在 默认 情况 下 页 头 和 页 尾随 着 网 页 正文 一 起 滚动 


2. 固定 式 工 具 栏 
[ 具 栏 


:默认 情况 下 的 显示 方 


jQuery Mobile 提供 了 固定 式 工具 栏 。 


而 页 尾 占 据 屏幕 的 底部 。 

不 同 的 移动 浏览 器 会 以 不 同 的 
部 分 显示 区 域 , 当 浏览 器 显示 地 址 栏 
但 是 ， 由 于 浏览 器 地 址 栏 的 存在 ， 


EB] ED 


jam.webhop.me, 


工具 栏 演示 

网 页 正文 内 容 

1 

3 

4 
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16 
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19 

页 尾 


式 与 理想 中 的 状态 有 


距 ， 这 个 差距 是 很 容易 弥补 的 ， 为 此 


固定 式 工 具 栏 在 屏幕 定位 上 始终 使 页 头 占据 屏幕 的 顶部 ， 


方式 显示 或 者 隐藏 浏览 器 的 标签 和 地 址 栏 。 地 址 栏 会 占据 一 
时, 固定 式 工具 栏 的 页 头 的 显示 位 置 虽然 是 在 网 页 的 顶部 ， 
实际 位 置 并 不 在 浏览 器 显示 区 域 的 项 部 ， 如 图 6.3 所 示 。 


4 3] ED 4 


口 工具 栏 演示 


页 尾 


图 6.3 浏览 器 地 址 栏 对 固定 式 工具 栏 屏 幕 定位 的 影响 
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图 6.3 中 ， 当 网 页 向 上 滚动 时 ， 随 着 网 页 内 容 的 上 移 ， 浏 览 器 的 地 址 栏 也 会 随 着 上 移 ， 直 
至 从 浏览 器 顶部 移出 显示 区 域 ， 这 时 ， 浏 览 器 窗口 的 顶部 被 网 页 的 页 头 占据 。 当 固定 式 工 具 栏 
的 页 头 占据 了 浏览 器 窗口 的 顶部 以 后 ， 不 会 像 在 默认 方式 下 那样 继续 向 上 滚动 。 但 是 当 网 页 下 
移 时 ， 地 址 栏 会 重新 出 现 ， 并 且 重 新 占据 浏览 器 窗口 的 顶部 。 浏 览 器 的 地 址 栏 属 于 浏览 器 的 工 
作 方 式 ，jQuery Mobile 网 页 无 法 干预 浏览 器 的 工作 方式 。 

Firefox 移动 浏览 器 的 默认 地 址 栏 滚动 方式 与 Chrome 移动 浏览 器 一 致 ， 我 们 可 以 通过 如 
图 6.4 所 示 的 Firefox 的 设置 页 面 关 闭 地 址 栏 滚动 功能 。 地 址 栏 被 锁定 后 ,固定 式 工具 栏 的 页 头 
的 显示 位 置 才 真 正 固定 下 来 。 


EEC EFIT EE EE 
‘@ oisplay 


Text size 
Medium 


Title bar 
Show page title 


Scroll title bar 


ADVANCED 


Character encoding 
Dontshow menu 


Plugins 
Taptoplay 


6.4 在 Firefox 移 动 浏览 器 中 关闭 地 址 栏 的 滚动 功能 


固定 式 工具 栏 在 编程 上 是 通过 设置 属性 data-position=“fixed" 实 现 的 。 工 具 栏 中 的 页 头 和 页 
尾 需 要 单独 设置 。 代 码 6.1 中 的 相应 网 页 代码 应 该 改 为 如 下 所 示 的 形式 : 

<div data-role="header" data-position="fixed"> 

<h1> 工 具 栏 演示 </h1> 

</div> 

<div class="ui-content" role="main"> 

ek 人 

<div data-role="footer" data-position="fixed"> 


<h1> 页 尾 </h1> 
</div> 


固定 式 工具 栏 依赖 于 CSS 技术 中 关于 通过 position 属性 实现 定位 的 支持 , 在 早期 版 本 的 移 
动 设备 上 可 能 无 法 实现 。 

3. 工具 栏 的 显示 与 隐藏 

固定 式 工具 栏 在 网 页 的 正文 内 容 滚动 时 ， 会 分 别 或 者 同时 自动 隐藏 网 页 的 页 头 或 者 页 尾 。 
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也 就 是 说 ， 固 定式 工具 栏 除了 显示 的 位 置 被 固定 在 浏览 器 窗口 的 顶部 和 底部 以 外 ， 当 一 个 含有 
固定 式 工具 栏 并 且 正 文 内 容 超出 屏幕 正文 显示 范围 的 网 页 加 载 并 显示 在 浏览 器 屏幕 中 时 , 工具 
栏 在 默认 情况 下 不 会 自动 隐藏 ， 这 时 在 屏幕 上 任何 位 置 单 击 ， 固 定式 工具 栏 的 自动 隐藏 功能 就 
会 被 激活 ， 工 具 栏 的 行为 方式 又 会 变 得 与 非 固定 式 工具 栏 十 分 相似 ,但 是 ， 当 网 页 正文 内 容 能 
够 完全 显示 在 一 个 浏览 器 窗口 中 时 , 页 尾 仍然 会 处 于 页 面 底部 , 而 不 会 紧 跟 在 网 页 正文 的 后 面 。 
在 网 页 上 再 次 单 击 ， 自 动 隐藏 功能 就 会 失效 ， 直 到 下 一 次 被 激活 。 

图 6.5 演示 了 固定 式 工具 栏 在 Android 系统 Firefox 移动 浏览 器 上 的 实际 运行 效果 。 图 中 左 
面 的 画面 是 自动 隐藏 功能 没有 被 激活 时 的 情形 ， 右 侧 的 画面 则 是 当 屏 幕 滚动 到 网 页 底部 ， 在 屏 
幕 上 单 击 ， 激 活 自动 隐藏 功能 ， 网 页 的 页 头 会 立即 移出 屏幕 顶部。 需要 注意 的 是 ， 当 单 击发 生 
时 ， 自 动 隐 藏 功 能 的 激活 和 失效 同时 作用 于 工具 栏 的 页 头 和 页 尾 。 如 果 不 需要 通过 单 击 网 页 显 
示 和 隐藏 工具 栏 的 功能 ， 这 个 工作 方式 还 可 以 通过 data-tap-toggle=“false* 属 性 关闭 。 
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图 6.5 固定 式 工具 栏 的 隐藏 与 再 现 
4. 全 屏 模式 


从 图 6.3 和 6.5 中 可 以 看 到 ， 当 工具 栏 在 屏幕 上 显示 时 ， 网 页 正文 紧 随 在 页 头 之 后 ， 两 者 
没有 重合 。 网 页 正文 实际 上 只 是 显示 在 网 页 的 页 头 和 页 尾 之 间 ， 并 不 能 全 屏 显 示 。 只 有 当 工 具 
栏 的 自动 隐藏 功能 被 激活 时 ， 网 页 正文 才能 够 被 全 屏 显 示 ， 但 是 ， 处 于 浏览 器 窗口 顶部 和 底部 
的 内 容 仍然 可 能 会 被 页 头 或 者 页 尾 履 盖 。 以 上 显示 模式 适用 于 大 多 数 以 实现 业务 功能 为 主 的 网 
站 ， 比 如 电子 商务 等 ， 但 是 这 种 模式 不 适用 于 多 媒体 或 者 游戏 网 站 等 以 娱乐 为 主要 目的 网 站 ， 
这 一 类 网 站 往往 需要 全 屏 显 示 ， 以 获得 尽量 多 的 显示 空间 。 

jQuery Mobile 提供 了 全 屏 显 示 模 式 来 解决 这 个 问题 ， 如 图 6.6 所 示 。 在 全 屏 模式 下 ， 正 文 
内 容 的 屏幕 定位 从 网 页 初始 显示 开始 就 会 从 浏览 器 窗口 的 顶部 开始 。 即 使 工具 栏 上 的 页 头 和 页 
尾 可 能 会 覆盖 部 分 网 页 内 容 ， 但 是 如 果 仔 细 观 察 ， 会 发 现 工具 栏 上 的 页 头 已 经 变 成 了 半 透 明 ， 
即使 被 工具 栏 覆盖 ， 仍 然 能 够 从 网 页 的 页 头 部 分 中 隐约 看 到 网 页 的 内 容 。 
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名 全 屏 机 | 


全 屏 模式 


全 屏 模式 


图 6.6 全 屏 显 示 模式 


代码 6.2 ”全屏 显示 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 工具 栏 </title> 
<meta charset="utf-8" /> 
<script sr js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 


<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<style> 
img { 
width: 100%; 
max-width: 1200px; 
margin: 0; 
} 
</style> 
</head> 
<body> 


<div id="page4" data-role="page"> 
<div data-role="header" data-position="fixed" data-fullscreen="true"> 
<h1> 全 屏 模 式 </h1> 
</div> 
<div class="ui-content" role="main"> 
<img src="./images/Mont-Tremblant-20110821-00085.jpg" 


alt="Mont Tremblant" /> 
</div> 
<div data-role="footer" data-position="fixed" data-fullscreen="true"> 
<h1> 全 屏 模式 </h1> 
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</div> 
</div> 
</body> 
</html> 
设计 全 屏 显示 模式 时 需要 注意 ， 虽 然 全 屏 是 指 网 页 正文 而 言 的 ， 但 是 ， 设 置 全 屏 模式 的 
data-fullscreen=“true” 却 是 在 工具 栏 中 指定 的 ， 从 代码 6.2 中 很 容易 就 能 看 到 这 个 特点 。 


5. 工具 栏 持久 显示 方式 


在 此 之 前 所 介绍 的 工具 栏 设计 方法 中 ， 工 具 栏 属于 一 个 页 面 (data-role=“page”) 的 一 部 分 ， 
当 一 个 网 页 跳 转 到 另 一 个 网 页 时 ， 工 具 栏 也 跟着 网 页 一 起 改变 。 在 实际 应 用 环境 中 ， 当 若干 个 
网 页 上 的 工具 栏 具 有 相同 的 内 容 和 样式 时 ， 还 可 以 采用 持久 (persistent) 显 示 方 式 。 在 这 种 方式 
下 ， 当 网 页 跳 转 时 ， 正 文 内 容 随 着 网 页 切换 而 发 生 切 换 过 程 中 的 动画 效果 ， 而 被 指定 为 持久 显 
示 方 式 的 工具 栏 则 会 保留 在 自己 所 在 的 位 置 ， 不 会 一 同 执行 动画 切换 效果 。 


@ ”通过 在 工具 栏 中 定义 data-id 属性 并 赋予 相同 的 属性 值 ， 把 具有 相同 内 容 和 样式 特征 
或 者 不 需要 动画 效果 的 工具 栏 归 为 一 类 。 
@ “data-id 属性 仅仅 作用 于 工具 栏 。 
e@ ”需要 实现 持久 显示 的 工具 栏 必须 同时 也 是 固定 式 工具 栏 。 
代码 6.3 中 的 HTML 文档 一 共 包含 3 个 页 面 ， 并且 这 3 个 页 面 的 工具 栏 都 是 固定 式 的 , 符 
合 持久 显示 的 基本 条 件 。 在 每 一 个 工具 栏 页 头 中 加 入 属性 data-id, 并 赋予 相同 的 属性 值 , 这 样 ， 
当 页 面 跳 转 时 ， 工 具 栏 页 头 会 保留 在 原 地 。 


代码 6.3 ”工具 栏 持久 显示 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 导航 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width, 
initial-scale=1.0"> 


<style> 
img { 
width: 100%; 
max-width: 1200px; 
margin: 07 
} 
</style> 
</head> 
<body> 


<div id="home" data-role="page"> 
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<div data-role="header" data-position="fixed" 
data-tap-toggle="false" data-id="ca travel"> 
<h1> 加 拿 大 旅游 </h1> 
</div> 
<div class="ui-content" role="main"> 
<ul data-role="listview"> 
<li><a href="#pagel"> 多 伦 多 </a></1i> 
<li><a href="#page2"> 尼 亚 加 拉 瀑 布 </a></1i> 
</ul> 
</div> 
<div data-role="footer" data-position="fixed" 
data-tap-toggle="false" data-id="ca travel footer"> 
<h1> 页 尾 </h1> 
</div> 
</div> 
<div id="pagel" data-role="page"> 
<div data-role="header" data-position="fixed" 
data-tap-toggle="false" data-id="ca travel"> 
<h1> 加 拿 大 旅游 </h1> 
</div> 
<div class="ui-content" role="main"> 
<img src="./images/toronto.jpg”alt=" 多 伦 多 " > 
<div> 多 伦 多 </div> 
<a href="#home"” data-role="button"> 返 回 主页 </a> 
</div> 
<div data-role="footer" data-position="fixed" 


data-tap-toggle="false" data-id="ca travel footer"> 
<h1> 页 尾 </h1> 
</div> 
</div> 
<div id="page2" data-role="page"> 
<div data-role="header" data-position="fixed" 
data-tap-toggle="false" data-id="ca travel"> 
<h1> 加 拿 大 旅游 </h1> 
</div> 
<div class="ui-content" role="main"> 
<img src="./images/niagara fall.jpg" alt=" 尼 亚 加 拉 瀑 布 " > 
<div> 尼 亚 加 拉 瀑布 </div> 
<a href="#home"” data-role="button"> 返 回 主页 </a> 
</div> 
<div data-role="footer" data-position="fixed" 
data-tap-toggle="false" data-id="ca travel footer"> 
<h1> 页 尾 </h1> 
</div> 
</div> 
</body> 
</html> 


通常 , 持久 显示 适用 于 页 头 和 页 尾 拥 有 相同 内 容 和 样式 的 场合 , 但 这 并 不 是 一 个 必要 条 件 。 
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持久 显示 方式 的 主要 作用 是 阻止 工具 栏 同 网 页 正文 在 页 面 跳 转 时 一 同 执行 相同 的 动画 效果 。 


6. 外 部 工具 栏 
工具 栏 的 持久 显示 方式 使 多 个 拥有 相同 工具 栏 的 网 页 在 网 页 跳 转 过 程 中 保持 工具 栏 的 稳 


定 ， 这 样 的 设计 甚至 能 够 适用 于 整个 小 型 移动 网 站 。 但 是 ， 如 果 一 个 网 站 中 大 量 的 网 页 拥有 相 
同 的 工具 栏 ， 又 都 需要 通过 持续 方式 显示 ， 则 带 来 一 个 严重 的 代码 元 余 问 题 ， 即 每 一 个 网 页 都 
包含 了 大 量 相同 的 工具 栏 代码 。 显 然 , 代码 元 余 造 成 源 代 码 可 维护 性 降低 , 网 页 文件 尺寸 增加 ， 
从 而 在 网 页 文件 加 载 过 程 中 使 用 更 多 的 数据 流量 和 造成 网 页 文件 加 载 时 间 更 长 等 问题 。 


jQuery Mobile 的 外 部 工具 栏 功能 能 够 简化 网 页 代码 ,把 元 余 代 码 合并 , 并 被 所 有 使 用 相同 


工具 栏 的 页 面 共享 。 
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外 部 工具 栏 只 需要 通过 以 下 两 个 步骤 就 能 够 很 容易 实现 。 

(1) 提取 将 被 共享 的 工具 栏 代 码 ， 把 页 头 和 页 尾 分 别 放 在 所 有 网 页 正文 内 容 之 前 和 之 后 。 
(2) 通过 JavaScript 程序 初始 化 工具 栏 。 

代码 6.4 外 部 工具 栏 


<!DOCTYPE html> 
<html> 
<head> 


<title>jQuery Mobile - 导航 </title> 

<meta charset="utf-8" /> 

<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 

<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 

<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 

<style> 


img { 
width: 100%; 
max-width: 1200px; 
margin: 07 
} 
</style> 
<script> 


$ (function() { 
$("[data-role='header'], [data-role='footer']") .toolbar(); 
1D; 
</script> 


</head> 
<body> 


<dqiv data-role="header" data-theme="b" data-position="fixed"> 
<h1> 加 拿 大 旅游 </h1> 


</div> 


<div id="home" data-role="page"> 
<div class="ui-content" role="main"> 


<ul data-role="listview"> 
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<li><a href="#pagel"> 多 伦 多 </a></1i> 
<li><a href="#page2"> 尼 亚 加 拉 瀑 布 </a></1i> 
</ul> 
</div> 
</div> 


<div id="pagel" data-role="page"> 
<div class="ui-content" role="main"> 
<img src="./images/toronto.jpg”alt=" 多 伦 多 " > 
<div> 多 伦 多 </div> 
<a href="#home” data-role="button"> 返 回 主页 </a> 
</div> 
</div> 


<div id="page2" data-role="page"> 
<div class="ui-content" role="main"> 
<img src="./images/niagara fall.jpg" alt=" 尼 亚 加 拉 瀑 布 ”> 
<qdiv> 尼 亚 加 拉 瀑 布 </div> 
<a href="#home"” data-role="button"> 返 回 主页 </a> 
</div> 
</div> 


<dqiv data-role="footer" data-theme="b" data-position="fixed"> 
<h1> 页 尾 </h1> 
</div> 
</body> 
</html> 
代码 6.4 与 代码 6.3 在 浏览 器 中 具有 非常 相似 的 效果 。 
代码 6.4 的 每 个 页 面 (data-role=“page”) 都 不 含有 页 头 和 页 尾 。 页 头 和 页 尾 被 从 每 个 页 面 中 
提取 出 来 ， 并 对 所 有 需要 的 页 面 共 享 。 由 于 页 头 和 页 尾 不 再 属于 任何 一 个 页 面 ， 当 一 个 页 面 初 
始 化 时 ， 工 具 栏 不 会 随 着 页 面 一 同 被 自动 初始 化 ， 因 此 ， 在 HTML 文档 被 加 载 完成 以 后 ， 使 
用 $(“[data-role=‘header’], [data-role='footer]”).toolbar0: 由 jQuery Mobile 把 带 有 属性 data-role= 
“header*? 和 data-role='footer 的 元 素 处 理 成 为 网 页 中 的 工具 栏 。 


6.2 工具 栏 的 内 容 和 样式 特征 


6.2.1 工具 栏 中 的 按钮 


1. 返回 按钮 


在 第 5 章 中 ， 我 们 已 经 在 实例 代码 中 见 过 jQuery Mobile 在 标题 栏 中 自动 添加 返回 按钮 的 
方法 。 自 动 添加 的 返回 按钮 拥有 系统 默认 的 图 标 、 可 定制 的 按钮 文字 ， 以 及 在 工具 栏 中 默认 的 
定位 等 。 由 于 按钮 是 由 系统 自动 添加 ， 按 钮 显示 与 否 取决 于 网 页 访问 的 历史 记录 。 在 一 个 网 站 
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的 第 一 个 页 面 中 ， 或 者 当 历 史记 录 堆 栈 已 经 清空 的 情况 下 ， 是 不 会 被 自动 添加 返回 按钮 的 。 
代码 6.5 演示 了 jQuery Mobile 默认 的 返回 按钮 。 


代码 6.5 ”默认 的 返回 按钮 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 返回 按钮 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-position="fixed" data-tap-toggle="false"> 
<h1> 主 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="#page2" data-role="button" data-mini="true" 
data-inline="true"> 按 钮 : 第 二 页 </a> 
<a href="#page3" data-role="button" data-mini="true" 
data-inline="true"> 按 钮 : 第 三 页 </a> 
<a href="jqm toolbar_common.htm1l”data-role="button" 
data-mini="true" data-inline="true"> 
按钮 : 其 他 HTML 文档 </a> 
</div> 
<div data-role="footer" data-position="fixed" data-tap-toggle="false"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
<div id="page2" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-position="fixed" data-tap-toggle="false"> 
<h1> 第 二 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div> 第 二 页 内 容 </div> 
</div> 
<div data-role="footer" data-position="fixed" data-tap-toggle="false"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
<div id="page3" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-position="fixed" data-tap-toggle="false"> 
<h1> 第 三 页 </h1> 
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</div> 
<div class="ui-content" role="main"> 
<div> 第 三 页 内 容 </div> 
</div> 
<div data-role="footer" data-position="fixed" data-tap-toggle="false"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
</body> 
</html> 


默认 的 返回 按钮 由 data-add-back-btn=“true”* 属 性 定义 ， 通 常 添加 在 工具 栏 页 头 中 。 当 网 页 
第 一 次 显示 时 ， 页 面 上 不 会 出 现 返回 按钮 ， 如 图 6.7 中 第 一 个 画面 所 示 。 
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主页 Q@ aa 第 三 页 © sd 演示 页 面 
第 三 页 内 容 演示 
按钮 : 第 二 页 。 按钮 ; 第 三 页 
按钮 : 其 他 HTML 文 档 
页 尾 页 尾 页 尾 


se» Om. >On. 
图 6.7 默认 的 返回 按钮 


jQuery Mobile 系统 默认 的 返回 按钮 出 现在 网 页 页 头 的 左 侧 , 系统 为 它 自动 安排 了 一 个 默认 
的 图 标 ， 按 钮 上 的 默认 文字 是 Back。 由 于 jQuery Mobile 为 返回 按钮 提供 的 默认 文字 使 用 的 是 
英语 ， 因 此 需要 把 它 替 换 成 我 们 需要 的 说 明文 字 。 取 代 系 统 默认 的 说 明文 字 的 方法 很 简单 ， 只 
要 为 返回 按钮 添加 data-back-btn-text 属性 即 可 。 例 如 ， 我 们 可 以 对 代码 6.3 做 如 下 修改 ， 第 二 
个 页 面 中 的 返回 按钮 就 变 成 了 如 图 6.8 所 示 的 中 文 文字 了 : 

<div data-role="header" data-add-back-btn="true" 


data-position="fixed" data-tap-toggle="false" 
data-back-btn-text=" 返 回 "> 


jamwevnopmelcno6 交 荐 co 


第 二 页 内 容 


图 6.8 被 蔡 换 说 明文 字 的 返回 按钮 
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2. 工具 栏 中 的 普通 按钮 


在 工具 栏 中 ， 除 了 返回 按钮 以 外 ， 其 他 按钮 通常 通过 <a> 元 素来 实现 。 代 码 6.6 演示 了 在 
工具 栏 中 的 普通 按钮 。 当 在 页 头 和 页 尾 分 别 加 入 一 个 按钮 以 后 ， 这 两 个 按钮 被 分 别 放置 在 页 头 
和 页 尾 的 左 侧 ， 与 默认 的 返回 按钮 的 显示 位 置 一 样 。 


代码 6.6 ”在 工具 栏 中 添加 按钮 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - 工具 栏 中 的 按钮 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 


<body> 
<div id="common" data-role="page"> 
<div data-role="header" data-position="fixed" data-tap-toggle="false"> 
<a href="#"> 按 钮 </a> 
<h1> 按 钮 演示 </h1> 
</div> 
<div class="ui-content" role="main"> 
演示 
</div> 
<div data-role="footer" data-position="fixed" data-tap-toggle="false"> 
<a href="#"> 按 钮 </a> 
</div> 
</div> 
</body> 
</html> 


代码 6.6 中 的 按钮 与 网 页 正文 中 的 按钮 相 比 ， 一 个 明显 的 不 同 在 于 ， 正 文中 的 按钮 需要 
data-role=“button” 修 饰 ， 而 代码 6.6 代表 了 典型 的 工具 栏 按钮 ， 不 需要 特别 指明 data-role。 


3. 工具 栏 中 按钮 的 定位 方法 


页 头 中 第 一 个 按钮 自动 出 现在 页 头 的 左 侧 ， 页 头 中 的 标题 文字 位 置 不 受 按钮 的 影响 ， 始 终 
居中 。 页 头 中 如 果 出 现 第 二 个 按钮 ， 则 会 被 自动 安排 在 页 头 的 右 侧 。 而 当 页 尾 中 出 现 第 二 个 按 
钮 时 ， 则 依次 排列 ， 如 图 6.9 所 示 。 

我 们 也 可 以 根据 需要 ， 更 改 默认 的 按钮 定位 方法 。 以 代码 6.7 为 例 ， 我 们 只 为 页 头 添加 一 
个 按钮 ， 并 把 这 个 按钮 放置 在 到 页 头 的 右 侧 ， 如 图 6.10 所 示 。 
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代码 6.7 ”在 页 头 中 实现 第 一 个 按钮 右 对 齐 


<!DOCTYPE html> 
<html> 
<head> 

<title>jQuery Mobile - 工具 栏 中 的 按钮 </title> 
"utf-8"™ /> 


<meta charset 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 


<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed" data-tap-toggle="false"> 
<a href="#" class= ui-btn-right"> 按 钮 1</a> 
<hl> 按 钮 演示 </h1> 
</div> 
<div class="ui-content"” role="main"> 演 示 </div> 
<div data-role="footer" data-position="fixed" data-tap-toggle="false"> 
<a href="#"> 按 钮 </a> 
</div> 
</div> 
</body> 
</html> 
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按钮 按钮 演示 按钮 按钮 消 示 按钮 
演示 演示 
按钮 。 按钮 按钮 


图 6.9 ”页 头 和 页 尾 各 自 包含 两 个 按钮 时 的 自动 定位 ”图 6.10 更 改 页 头 中 第 一 个 按钮 的 默认 定位 方式 
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jQuery Mobile 提供 了 两 个 CSS 类 , 用 于 定位 各 工具 栏 中 


的 按钮 , ui-btn-left 把 按钮 放置 在 工具 栏 的 左 侧 , 而 wi-btn-right cr 


把 按钮 放置 在 工具 栏 的 右 侧 。ui-btm-right 类 仅 适 用 于 页 头 ， 搜 包 演示 提 
对 页 尾 中 的 按钮 定位 无 效 。 如 果 在 代码 6.7 的 页 头 中 增加 一 | 
个 按钮 ， 对 两 个 按钮 分 别 赋予 以 上 两 个 CSS 类 ,这 两 个 按钮 要 未 

会 按照 CSS 类 的 要 求 定位 ， 而 与 在 HTML 文档 中 的 出 现 顺 


工具 栏 页 头 和 页 尾 如 果 出 现 大 量 按钮 ,， 则 会 以 图 6.11 的 
方式 显示 。 显 然 ， 在 工具 栏 中 放置 过 多 的 按钮 并 不 是 一 个 良 


好 的 用 户 界面 设计 方案 。 
6.2.2 标题 栏 样式 扩 轿 开机 攻 轴 六 思域 
1. 标题 栏 中 的 文字 和 图 片 图 6.11 工具 栏 中 的 多 个 按钮 


从 本 章 图 6.1~6.7 中 可 以 发 现 ， 工 具 栏 中 的 标题 文字 的 显示 位 置 居 中 ， 并 且 拥 有 相同 的 字 
体 样式 。 另外, 观察 网 页 代码 能 够 发 现 , 这 些 标题 文字 都 被 包含 在 <h1>~<h6> 的 标签 中 。jQuery 
Mobile 通过 在 工具 栏 中 的 直接 子 元 素 <h1>~<h6> 为 所 包含 的 文字 赋予 统一 的 样式 特征 。 这 里 的 
<hl>~<h6> 标 签 只 有 HTML 语义 上 的 意义 ， 由 于 jQuery Mobile 对 于 工具 栏 中 的 <h1>~<h6> 直 
接 子 元 素 的 样式 进行 了 重新 定义 ， 这 些 元 素 原 来 在 浏览 器 中 的 默认 样式 被 jQuery Mobile 赋予 
的 样式 取代 了 。 

工具 栏 中 标题 文字 的 样式 与 定位 体现 了 jQuery Mobile 利用 HTML 元 素 在 DOM 中 的 层次 
关系 赋予 相应 样式 的 特点 。 同 样 ， 我 们 通过 下 面 的 代码 片段 ， 利 用 <hl> 标 签 很 容易 把 图 片 在 工 
有 具 栏 中 按照 图 6.12 那样 居中 显示 : 

<div data-role="header" data-position="fixed"> 

<hl> 
<img src="images/charts.png" alt=" 图 标 "> 
&nbsp; 
<span> 图 表 </span> 
</hl> 
</div> 


网 页 正文 内 容 


图 6.12 图 片 和 文字 居中 显示 
但 是 , 一旦 严格 的 层次 关系 被 打破 ， 工 具 栏 中 由 jQuery Mobile 赋予 的 样式 特性 也 将 随 之 
消失 。 例 如 ， 在 上 面 的 代码 片段 中 插入 一 层 <div> 标 签 ， 变 成 下 面 的 形式 以 后 ，jQuery Mobile 
对 页 头 中 文字 的 字体 大 小 和 显示 位 置 的 样式 “修饰 ”就 不 再 有 效 。 相 关 文 字 和 图 片 的 样式 变 回 
到 原来 的 浏览 器 默认 样式 ， 如 图 6.13 所 示 。 
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<div data-role="header" data-position="fixed"> 


<div> 
<hl> 
<img src="images/charts.png”alt=" 图 标 "> 
&nbsp; 
<span> 图 表 </span> 
</h1> 
</div> 
</div> 


> 图 表 


网 页 正文 内 容 


6.13 ”违反 了 jQuery Mobile 页 头 标准 结构 以 后 
对 比 图 6.12 和 6.13， 可 以 看 出 ， 在 通常 情况 下 ， 应 该 尽量 遵循 jQuery Mobile 的 代码 编写 
方式 ， 最 大 化 由 jQuery Mobile 系统 带 来 的 便利 。 同 时 也 应 该 了 解 到 ， 一 旦 需要 时 ， 应 该 怎样 
回避 jQuery Mobile 自动 添加 的 样式 ， 便 于 在 某 些 情况 下 实现 用 户 界面 的 特殊 定制 。 
2. 标题 栏 与 样式 主题 


jQuery Mobile 通过 主题 样本 (swatch) 来 确定 网 页 和 网 页 上 的 各 个 组 成 部 分 的 颜色 。 

jQuery Mobile 系统 提供 了 浅 色 样本 a 和 深 色 样本 b。 主 题 样式 通过 data-theme 属性 指定 。 
网 页 上 一 个 组 成 部 分 的 样式 首先 遵从 于 data-theme 属性 ， 如 果 data-theme 属性 缺 省 ， 则 遵从 上 
级 容器 的 样式 ， 直 到 网 页 的 最 外 层 容器 (data-role="“page”)。 当 无 法 从 外 层 容 器 中 获得 主题 样式 
时 ， 自 动 采用 默认 的 样式 a。 这 就 是 本 书 中 很 多 演示 网 页 表现 为 浅 色 主 题 的 原因 ， 因 为 没有 在 
网 页 代码 中 为 任何 一 级 容器 指定 主题 样式 。 

代码 6.8 演示 了 把 样本 b 赋予 一 个 页 面 (data-role=“page”)， 网 页 内 部 的 工具 栏 继 承 了 网 页 
的 主题 样本 ， 并 且 工 具 栏 内 部 的 按钮 也 从 页 面 中 继承 了 主题 样本 。 由 于 jQuery Mobile 系统 提 
供 的 默认 样本 b 不 便于 在 印刷 物 上 识别 ,这 里 借用 了 jQuery Mobile 的 经 典 主 题 (关于 经 典 主题 ， 
可 参阅 本 书 的 5.1.2 小 节 )。 


代码 6.8 ”主题 样本 在 工具 栏 中 的 继承 关系 


<1DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 工具 栏 样式 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 


<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 

<link href="js/jquery-mobile-classic-theme/theme-classic.css" 
rel="stylesheet" /> 
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<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div id="common" data-role="page" data-theme="b"> 
<div data-role="header" data-add-back-btn="true" 
data-position="fixed" data-tap-toggle="false"> 
<a href="#"> 按 钮 1</a> 
<h1> 标 题 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div> 外 部 工具 栏 样式 主题 演示 </div> 
<div> 
<a href="#" data-role="button"> 按 钮 2</a> 
</div> 
</div> 
<div data-role="footer" data-position="fixed" data-tap-toggle="false"> 
<a href="#"> 按 钮 3</a> 
</div> 
</div> 
</body> 
</html> 


代码 6.8 演示 了 主题 样本 最 简单 的 用 法 ， 仅 仅 直接 依靠 网 页 内 部 的 层次 关系 ， 把 外 层 容器 
中 的 主题 继承 到 网 页 的 内 部 组 成 部 分 中 。 但 是 这 种 简单 的 继承 关系 却 不 能 应 用 到 使 用 外 部 工具 
栏 的 网 页 中 。 因 为 外 部 工具 栏 在 HTML 文档 中 被 定义 在 页 面 之 外 ， 不 直接 属于 任何 一 个 页 面 ， 
因此 无 法 从 页 面 中 继承 样式 ， 并 且 ， 外 部 工具 栏 的 初始 化 程序 并 不 负责 自动 引用 目标 网 页 的 页 
面 主题 样本 ， 所 以 ， 外 部 工具 栏 的 主题 需要 通过 data-theme 属性 指定 。 

代码 6.9 演示 了 在 使 用 外 部 工具 栏 的 网 页 中 ， 为 外 部 工具 栏 赋予 所 需 样式 的 方法 ， 即 分 别 
在 外 部 工具 栏 的 页 头 和 页 尾 中 应 用 data-theme 属性 ， 并 指定 主题 样本 所 对 应 的 字母 为 属性 值 。 


代码 6.9 为 外 部 工具 栏 添加 样式 主题 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - 工具 栏 样式 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<link href="js/jquery-mobile-classic-theme/theme-classic.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<script> 
$(function() { 
$("[data-role='header'], [data-role='footer']") .toolbar(); 
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Ds 
</script> 
</head> 


<body> 
<div data-role="header" data-add-back-btn="true" 
data-position="fixed" data-tap-toggle="false" 
data-theme="b"> 


<a href="#"> 按 钮 1</a> 
<h1> 标 题 </h1> 
</div> 


<div id="common" data-role="page" data-theme=" 
<div class="ui-content" role="main"> 


<qdiv> 样 式 主题 演示 </div> 
<div> 
<a href="#"” data-role="button"> 按 钮 2</a> 
</div> 
</div> 
</div> 


<div data-role="footer" data-position="fixed" 
data-tap-toggle="false" 
data-theme="b"> 
<a href="#"> 按 钮 3</a> 
</div> 
</body> 
</html> 


只 有 对 外 部 工具 栏 单独 赋予 样式 以 后 ， 工 具 栏 才 会 具有 指定 的 样式 特征 ， 如 图 6.14 所 示 。 
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6.14 ”外 部 工具 栏 中 的 主题 样式 
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6.3 导 航 栏 


6.3.1 导航 栏 基本 结构 


导航 栏 是 网 站 导航 的 常用 方法 ,经 常 出 现在 网 页 的 标题 栏 下 ， 也 已 能 出 现在 网 页 正文 或 者 
页 尾 。 一 个 基本 的 导航 栏 包含 了 5 个 可 附带 图 标的 按钮 。 在 网 页 HTML 代码 中 ， 导 航 栏 是 由 
定义 在 被 data-role=“navbar” 修 饰 的 容器 中 的 无 序列 表 (<ul>) 形 成 的 。 

代码 6.10 演示 了 一 个 最 简单 的 导航 栏 。 


代码 6.10 ”最 简单 的 导航 栏 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 导航 栏 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-position="fixed"> 


<h1> 导 航 栏 演示 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a href= class="ui-btn-active"> 第 一 页 </a></1i> 


<li><a hre 
<li><a href: 


> 第 二 页 </a></1i> 
> 第 三 页 </a></1i> 


<1i><a href="#"> 第 四 页 </a></1i> 
</ul> 
</div> 
</div> 
<div class="ui-content" role="main"> 
<div> 主 页 </div> 
<div data-role="navbar"> 
<ul> 


" class="ui-btn-active"> 第 一 页 </a></1i> 
#"> 第 二 页 </a></1i> 
"> 第 三 页 </a></1i> 
#"> 第 四 页 </a></1i> 
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</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 页 尾 </h1l> 
<div data-role="navbar"> 
<ul> 
<li><a href="#" class="ui-btn-active"> 第 一 页 </a></1i> 
<1i><a href="#"> 第 二 页 </a></1i> 
<1i><a href="#"> 第 三 页 </a></1i> 
<li><a href="#"> 第 四 页 </a></1i> 
</ul> 
</div> 
</div> 
</div> 
</body> 
</html> 


这 段 代码 仅 用 于 说 明 导 航 栏 的 编程 方法 ， 导 航 按钮 中 的 链接 并 没有 指向 任何 实际 的 网 页 
URL。 代 码 中 相同 的 导航 栏 重 复出 现 了 3 次 ， 分 别 出 现 在 页 头 、 正 文 ， 以 及 页 尾 中 。 每 一 个 导 
航 栏 都 包含 了 4 个 按钮 。 

从 图 6.15 中 可 以 看 到 ， 工 具 栏 中 的 导航 栏 占用 了 100% 的 页 面 宽度 ， 而 在 网 页 内 容 部 分 的 
导航 栏 与 浏览 器 边框 之 间 留 有 间隙。 其 实 导航 栏 本 身 会 占用 100% 的 宽度 ， 但 是 同时 又 会 受到 
所 在 容器 的 CSS 属性 padding 的 影响 而 产生 缩 进 的 效果 。 
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图 6.15 网 页 各 组 成 部 分 中 的 导航 栏 
6.3.2 ”导航 栏 中 的 按钮 


1. 导航 按钮 的 排列 规则 
jQuery Mobile 中 的 导航 栏 在 通常 情况 下 会 包含 1~5 个 导航 按钮 。 当 按钮 数量 在 1 个 到 5 
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个 之 间 时 ， 每 个 按钮 平分 导航 栏 的 宽度 。 即 当 导航 栏 中 只 有 一 个 按钮 时 ， 这 个 按钮 自动 占用 
100% 的 导航 栏 宽度 ， 而 当 导 航 栏 含有 5 个 按钮 时 ， 每 个 按钮 占用 20% 的 导航 栏 宽度 。 

图 6.16 分 别 演示 了 当 导 航 栏 中 依次 包含 1 到 5 个 导航 按钮 时 的 显示 效果 。 其 中 的 深 色 按 钮 
代表 了 一 个 导航 栏 中 当前 被 按 下 的 按钮 。 

当 导 航 栏 中 包含 超过 5 个 导航 按钮 时 ， 这 些 按钮 不 再 平分 导航 栏 的 宽度 ， 而 是 形成 两 列 按 
钮 ， 如 图 6.17 所 示 。 
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6.16 每 一 个 导航 栏 分 别 包含 1~5 个 6.17” 当 一 个 导航 栏 包含 超过 5 个 
导航 按钮 时 的 按钮 排列 情况 按钮 时 的 按钮 两 列 排列 方式 
前 面 图 6.15 显示 了 导航 按钮 排列 在 工具 栏 (页 头 和 页 尾 ) 文 字 的 下 方 。 如 果 把 相应 的 代码 移 
到 工具 栏 标题 文字 (包含 在 <hl> ~ <h6> 中 任何 一 个 元 素 之 间 的 文字 ) 之 前 ， 导 航 按钮 就 会 显示 在 
工具 栏 文字 的 上 方 。 
2. 导航 按钮 中 的 图 标 
导航 栏 中 的 导航 按钮 和 工具 栏 中 的 返回 按钮 , 或 者 其 他 
普通 按钮 一 样 ， 可 以 附加 图 标 。 本 书 第 7 章 将 更 详细 地 讲解 


按钮 与 图 标 ， 这 里 先 借用 导航 按钮 和 代码 6.11， 对 jQuery ED 
Mobile 中 的 图 标 和 按钮 做 一 个 大 概 的 介绍 。 四 的。 

代码 6.11 演示 了 一 个 在 工具 栏 页 头 和 页 尾 中 分 别 拥有 RE 
导航 栏 的 网 页 ， 如 图 6.18 所 示 。 网 页 内 容 


导航 栏 中 的 每 一 个 导航 按钮 都 带 有 相应 的 图 标 。 图 标 由 
data-icon 属性 决定 。data-icon 的 属性 值 可 以 是 系统 图 标的 图 
标 名 称 , 也 可 以 是 自 定义 图 标的 图 标 名称 。 代码 6.11 仅 使 用 
了 jQuery Mobile 的 系统 图 标 。 


在 本 例 中 ， 页 头 中 的 图 标 采用 了 默认 位 置 ， 图 标 位 于 按 二 
钮 文字 的 上 方 ， 而 页 尾 中 的 图 标 通过 为 导航 栏 设置 data- a 
iconpos 属性 ， 把 图 标的 显示 位 置 改 为 按钮 文字 的 右 侧 。 


这 里 需要 注意 的 是 ，data-iconpos 属性 必须 设置 在 导航 6.18 ”按钮 图 标 及 其 显示 文字 
栏 (data-role=“navbar”) 上 才能 发 挥 作用 ， 使 整个 导航 栏 中 的 
所 有 导航 按钮 中 的 图 标 显示 在 相同 的 位 置 。 如 果 把 data-iconpos 属性 设置 到 每 一 个 单独 的 按钮 
上 ， 则 不 会 起 到 任何 作用 。 
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代码 6.11 导航 按钮 与 图 标 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 导航 栏 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"> 
</script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-position="fixed"> 


<h1> 导 航 按钮 中 的 图 标 </h1> 
<div data-role="navbar"> 
<ul> 


<1i><a href="#" data-icon="home"> 主 页 </a></1i> 
<li><a href="#" data-icon="shop"> 购 物 </a></1i> 


<li><a #" data-icon="user"> 用 户 </a></1i> 
<li><a #" data-icon="search"> 搜 索 </a></1i> 
</ul> 
</div> 
</div> 
<div class="ui-content" role="main"> 
<div> 网 页 内 容 </div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 页 尾 </h1> 
<div data-role="navbar" data-iconpos="right"> 
<ul> 


<li><a href="#" data-icon="phone"> 联 系 </a></1i> 
<li><a href="#" data-icon="calendar"> 日 历 </a></1i> 
<1i><a href="#" data-icon="info"> 信 息 </a></1i> 
</ul> 
</div> 
</div> 
</div> 
</body> 
</html> 


3. 导航 按钮 的 状态 


前 面 在 代码 6.10 中 ， 每 一 个 导航 栏 的 第 一 个 导航 按钮 都 被 赋予 了 CSS 类 ui-btn-active。 这 
个 CSS 类 用 于 表现 一 个 按钮 被 按 下 时 的 样式 。 当 一 个 导航 按钮 被 按 下 时 ，jQuery Mobile 会 
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这 个 CSS 类 动态 地 赋予 最 后 被 按 下 的 按钮 , 而 先前 处 于 按 下 状态 的 按钮 将 失去 ui-btn-active 类 。 
以 上 提 到 了 wi-btn-active 类 的 两 种 用 法 。 这 个 CSS 类 既 可 以 像 在 代码 6.10 中 那样 , 通过 网 页 编 
程 静态 赋予 一 个 按钮 ， 也 可 以 通过 jQuery Mobile 系统 赋予 一 个 被 按 下 的 按钮 。 不 论 是 哪 一 种 
方法 ， 导 航 栏 会 自动 维护 导航 按钮 的 状态 ， 确 保 只 有 一 个 按钮 获得 wi-btn-active 类 。 

但 是 ， 默 认 的 导航 按钮 也 会 带 来 一 些 问 题 。 由 于 由 jQuery Mobile 系统 维护 的 ui-btn-active 
类 能 够 使 一 个 导航 按钮 具有 被 按 下 状态 所 需要 的 样式 ， 当 在 第 一 个 页 面 中 按 下 指向 第 二 页 的 导 
航 按钮 时 ， 被 按 下 的 导航 按钮 的 样式 被 改变 ， 在 正 是 我 们 所 期 待 的 效果 ， 然 后 ， 屏 幕 切 换 到 第 
二 页 ， 可 是 第 二 页 上 指向 本 身 的 按钮 在 页 面 初始 化 的 过 程 中 并 没有 任何 按钮 被 按 下 ， 因 此 当 第 
二 页 在 屏幕 上 显示 时 ， 导 航 按钮 本 身 在 默认 情况 下 无 法 告诉 用 户 导航 栏 中 的 哪 一 个 按钮 在 上 一 
个 页 面 中 被 按 下 。 简 单 地 说 ， 导 航 栏 中 的 导航 按钮 在 默认 情况 下 不 能 维护 按钮 的 当前 状态 。 当 
网 页 发 生 切 换 时 ， 新 的 页 面 中 导航 按钮 的 状态 被 自动 恢复 成 默认 状态 。 

代码 6.12 演示 了 维护 导航 按钮 状态 的 简单 方法 。 


代码 6.12 导航 按钮 的 状态 保持 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 导航 栏 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 


<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div id="pl" data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 导 航 栏 演示 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#p1" 
class="ui-btn-active ui-state-persist"> 
第 一 页 </a></1i> 
<li><a href="#p2"> 第 二 页 </a></1i> 
<li><a href="#p3"> 第 三 页 </a></1i> 
</ul> 
</div> 
</div> 
<div class="ui-content" role="main"> 
<div> 第 一 页 </div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 页 尾 </h1> 
</div> 
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</div> 
<div id="p2" data-role="page"> 
<div data-role="header" data-position="fixed"> 


<h1> 导 航 栏 演示 </h1> 
<div data-role="navbar"> 
<ul> 


<1i><a href="#p1"> 第 一 页 </a></1i> 
<li><a href="#p2" 
class="ui-btn-active ui-state-persist"> 
第 二 页 </a></1i> 
<li><a href="#p3"> 第 三 页 </a></1i> 
</ul> 
</div> 
</div> 
<div class="ui-content" role="main"> 
<div> 第 二 页 </div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 页 尾 </h1> 
</div> 
</div> 
<div id="p3" data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 导 航 栏 演示 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#pl"> 第 一 页 </a></1i> 
<1i><a href="#p2"> 第 二 页 </a></1i> 
<li><a href="#p3" 
class="ui-btn-active ui-state-persist"> 
第 三 页 </a></1i> 
</ul> 
</div> 
</div> 
<div class="ui-content" role="main"> 
<div> 第 三 页 </div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 页 尾 </h1> 
</div> 
</div> 
</body> 
</html> 


代码 6.12 是 一 个 包含 3 个 页 面 的 HTML 文档 。 每 一 个 页 面 都 包含 了 一 个 内 容 相 同 的 导航 
栏 。 导 航 栏 中 指向 当前 自身 页 面 的 按钮 被 赋予 了 CSS 类 ui-btn-active。 这 表明 当 一 个 页 面 在 浏 
览 器 中 显示 时 ， 指 向 当前 页 面 的 导航 按钮 被 预先 设置 为 按 下 状态 。 不 过 导航 按钮 的 状态 会 随 着 
其 他 导航 按钮 上 发 生 的 事件 而 改变 。 这 样 ， 当 在 浏览 器 中 切换 到 其 他 页 面 以 后 ， 再 次 切换 回 原 
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来 的 页 面 时 , 原来 页 面 上 的 按钮 状态 已 经 被 在 该 页 面 的 后 续 按 钮 事件 所 更 改 , 恢复 成 默认 状态 ， 
因此 ， 只 使 用 ui-btn-active 还 不 能 获得 稳定 的 状态 效果 。 为 此 ，jQuery Mobile 提供 了 另外 一 个 
CSS 类 ui-state-persist， 它 能 够 帮助 页 面 切换 时 保持 和 恢复 按钮 的 状态 。 


6.3.3 导航 栏 的 样式 风格 


在 jQuery Mobile 中 ， 样 式 风格 由 属性 data-theme 指定 。 在 本 书 前 面 的 部 分 中 ， 关 于 页 面 
风格 、 工 具 栏 ， 以 及 按钮 等 多 个 实例 的 网 页 中 已 经 多 处 使 用 了 data-theme 属性 。 导 航 栏 的 主题 
风格 设置 与 按钮 等 主题 设置 编码 方式 大 同 小 异 。 

代码 6.13 演示 了 为 导航 栏 设 置 主题 风格 时 需要 特别 留意 的 几 个 要 点 。 


代码 6.13 ”导航 栏 主题 风格 的 设置 方法 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - 导航 栏 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-position="fixed" data-theme="b"> 
<h1> 导 航 栏 按钮 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#" data-icon="home"> 主 页 </a></1i> 
<li><a href="#" data-icon="shop"> 购 物 </a></1i> 
<li><a href="#" data-icon="user"” data-theme="a"> 用 户 </a></1i> 
<li><a href="#" data-icon="search"” data-theme="a"> 搜 索 </a></1i> 
</ul> 
</div> 
</div> 
<div class="ui-content" role="main"> 
<div> 网 页 内 容 </div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 页 尾 </h1> 
</div> 
</div> 
</body> 
</html> 
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导航 栏 与 工具 栏 和 按钮 一 样 ， 能 够 从 当前 所 在 容 
器 中 继承 样式 主题 。 但 是 ， 导 航 栏 与 其 他 UI 组 件 的 
区 别 在 于 : 
@ 不 能 直接 对 导航 栏 (data-role=“navbar”) 设 置 
主题 样式 。 
@ 允许 对 导航 栏 中 的 某 一 个 导航 按钮 单独 设置 
主题 样式 。 
基于 以 上 两 个 主要 区 别 , 对 照 代 码 6.13 和 图 6.19， 
可 以 很 容易 看 出 这 些 特 点 在 网 页 代码 上 的 反映 。 
首先 ， 网 页 并 没有 直接 对 导航 栏 设 置 样式 主题 ， 
而 是 把 data-theme 设置 在 导航 栏 的 容器 中 ， 也 就 是 把 
data-theme 属性 赋予 了 导航 栏 所 在 的 页 头 。 
其 次 ， 导 航 栏 中 有 4 个 按钮 ， 前 两 个 按钮 的 样式 
从 导航 栏 获得 ， 因 此 ， 网 页 与 导航 栏 一 样 ， 也 表现 为 
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深 色 主题 b。 而 后 两 个 按钮 都 被 单独 用 data-theme 属性 赋予 了 样式 主题 a， 因 此 ， 这 两 个 按钮 


在 网 页 上 表现 为 浅 色 。 


6.4 网 页 中 的 网 页 


所 谓 “ 网 页 中 的 网 页 ”， 就 是 一 个 网 页 嵌 套 在 另 一 个 网 页 中 。 这 是 本 章 的 一 个 题 外 话 。 这 
种 用 法 在 演示 项 目 中 经 常 出 现 , 但 是 , 在 实际 商业 项 目 中 使 用 的 机 会 不 多 。jQuery Mobile 的 演 
示 网 站 用 到 了 这 种 特别 的 技巧 。 由 于 在 一 般 项 目 中 较 少 使 用 ， 相 关 技术 文档 十 分 有 限 。 

本 章 在 这 里 ， 通 过 代码 6.14， 对 嵌 套 网 页 做 一 个 简要 的 介绍 。 


代码 6.14” 典 套 网 页 


<!DOCTYPE html> 

<html> 

<head> 
<title>jQuery Mobile - 妊 套 网 页 </title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 


rel="stylesheet" /> 


<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<atyle> 
sspacer { 
height: 25px; 
} 
img { 
width: 60%; 
height: auto; 
} 
</style> 
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</head> 
<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 巾 套 网 页 演示 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div class="spacer">&nbsp;</div> 
<div data-demo-html="true"> 
<div data-role="header" data-theme="b"> 
<hl> 媒 套 网 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<img src="images/niagara fall.jpg" alt="Niagara Fall"> 
</div> 
<div data-role="footer" data-theme="b"> 
<h1> 页 尾 </h1> 
</div> 
</div> 
<div class="spacer">&nbsp;</div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 页 尾 </hl> 
</div> 
</div> 
</body> 
</html> 


在 jQuery Mobile 中 ， 一 个 “网 页 ”由 data-role=“page" 定 义 。 当 一 个 网 页 棋 套 在 另 一 个 网 
页 中 时 ， 外 层 网 页 是 一 个 常规 网 页 ， 而 内 部 被 包含 的 网 页 不 具有 data-role=“page” 这 样 一 个 层次 
结构 。jQuery Mobile 使 用 <div data-demo-html=“true”>.…</div> 这 样 一 层 结构 作为 嵌 套 网 页 的 容 
器 ， 把 另 一 个 网 页 的 页 头 、 正 文 和 页 尾 都 包含 在 内 ， 形 成 了 一 个 网 页 中 的 网 页 。 通 常 ， 这 样 的 
网 站 直接 使 用 桌面 浏览 器 演示 ， 代 码 6.14 的 实际 效果 如 图 6.20 所 示 。 


4 了 GDpnvdthcome B= 
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让 于 网 页 坑 示 


图 6.20 内 套 网 页 的 效果 
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6.5 本 章 习 题 


选择 题 ( 单 选 ) 

(1) 导航 栏 可 以 出 现在 ( )。 
A. 页 头 、 正 文 内 容 、 页 尾 B. 只 能 出 现在 页 头 和 页 尾 
C. 页 头 之 前 D. 页 尾 之 后 


(2) 页 头 中 的 data-fullscreen=“true” 表 示 ( 六 
A. 页 头 处 于 全 屏 模式 。 页 头 将 占据 全 部 浏览 器 窗口 
B. 使 用 页 头 代 替 网 页 正文 区 域 
C. 使 网 页 正文 全 屏 显示 
D. 使 页 头 和 页 尾 同 时 处 于 全 屏 模式 
(3) 页 头 中 的 按钮 ( )。 
A. 必须 通过 data-role=“button" 定 义 
B. 必须 包含 在 <hl> ~ <h6> 这 6 个 元 素 之 一 
C. 只 能 放置 标准 的 返回 按钮 
D， 页 头 的 直接 子 元 素 <a> 被 自动 转换 为 按钮 
(4) 下 面 哪 一 个 (组 ) 属 性 能 够 关闭 国定 式 工具 栏 的 自动 隐藏 功能 ? (。 ) 
A. data-position="fixed” 
B. data-tap-toggle="false™ 
C. data-position="fixed” 和 data-fullscreen="true” 
D. data-position="“fixed” 和 data-tap-toggle="false” 
(5) 通过 data-add-back-btn=“true” 自 动 添 加 的 返回 按钮 只 能 显示 在 页 头 的 左 侧 ， 无 法 显示 
在 页 头 的 右 侧 。( 


A. 对 BB 包 
(6) 当 页 头 中 应 用 了 data-add-back-btn=“true” 以 后 ， 网 页 必然 会 自动 添加 一 个 返回 按钮 。 
, 

A. 对 B. 错 


(7) 关于 外 部 工具 栏 ， 以 下 哪 一 个 描述 是 错误 的 ? ( 。 ) 
A. 外 部 工具 栏 必须 使 用 data-id 属性 标识 
B. 外 部 工具 栏 不 会 与 网 页 一 同 进行 初始 化 
C. 外 部 工具 栏 无 法 从 网 页 中 继承 样式 
D. 外 部 工具 栏 碱 少 了 网 页 代码 的 宛 余 程度 
(8) 导航 按钮 中 ， 图 标的 显示 位 置 (。 )。 
A. 可 以 通过 为 导航 栏 设置 data-icon 属性 改变 
B. 可 以 通过 为 每 一 个 导航 按钮 单独 设置 data-icon 属性 改变 
C. 可 以 通过 为 导航 栏 设置 data-iconpos 属性 改变 
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D. 可 以 通过 为 每 一 个 导航 按钮 单独 设置 data-iconpos 属性 改变 
(9) 导航 按钮 中 ， 按 钮 的 样式 风格 ( 。 )。 
A， 可 以 通过 data-theme 属性 直接 对 导航 栏 进行 设置 
B. 可 以 通过 data-theme 属性 直接 对 导航 栏 中 的 按钮 单独 进行 设置 
C. 先 把 所 有 的 按钮 归 入 一 个 <div> 容 器 ， 再 通过 data-theme 属性 直接 对 容器 设置 
D. 可 以 一 次 改变 所 有 按钮 的 样式 ， 但 不 能 为 一 个 按钮 单独 进行 设置 
(10) 当 在 页 尾 中 放置 6 个 按钮 时 ，(  )。 
A. 一 个 紧 跟 一 个 排列 ， 如 果 浏 览 器 窗口 宽度 不 足 ， 则 自动 换行 
B. 在 页 尾 中 第 一 行 的 左 、 右 两 侧 各 显示 一 个 按钮 ， 其 余 的 按钮 换行 显示 
C. 分 为 两 列 显示 
D. 页 尾 只 能 容纳 1~5 个 按钮 
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本 章 导读 : 


本 章 将 介绍 jQuery Mobile 中 最 基本 的 [组 件 ， 包 括 按钮 、 表格 、 列 表 和 各 种 
表单 成 员 组 件 。 这 一 章 中 的 UI 组件 与 HTML 中 的 按钮 、 表 单 、 表 格 等 在 功能 上 十 
分 相似 ， 但 是 UI 表现 却 充 分 体现 了 jQuery Mobile 针对 移动 设备 特点 进行 的 优化 。 

在 介绍 这 些 UI 组件 的 同时 , 也 开始 逐步 带领 读者 尝试 UI 组 件 样式 定制 的 基本 
方法 ， 为 本 书 第 9 章 和 第 10 章 做 必要 的 铺垫 。 

通过 本 章 的 学 习 , 读者 将 会 掌握 如 何 利用 jQuery Mobile 中 的 基本 UI 组 件 开发 
移动 网 站 ， 并 能 够 做 一 些 简单 的 样式 定制 。 

为 了 便于 从 本 书 的 插图 上 观察 某 些 样式 特征 和 细微 的 样式 变化 , 本 章 的 一 部 分 
实例 采用 了 jQuery Mobile 的 经 典 样式 ， 并 且 使 用 了 桌面 浏览 器 。 经 典 样 式 仅 在 实 
例 中 提供 参考 ， 不 建议 在 产品 环境 中 使 用 。 
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7.1 按钮 和 图 标 


本 书 在 第 5 章 和 第 6 章 的 实例 中 ， 已 经 使 用 了 3 种 不 同 的 按钮 ， 分 别 是 工具 栏 中 由 系统 自 
动 添加 的 返回 按钮 、 工 具 栏 按钮 ， 以 及 普通 按钮 。 除 了 这 3 种 按钮 外 ， 表 单 按钮 也 十 分 常见 。 
这 4 种 按钮 在 jQuery Mobile 开发 实践 中 经 常用 到 。 

本 节 将 系统 地 讲解 按钮 ， 以 及 按钮 的 基本 样式 设计 和 等。 另外， 本 书 第 5 章 在 介绍 jQuery 
Mobile 基本 功能 的 时 候 已 经 简要 介绍 了 jQuery Mobile 的 图 标 ， 在 第 6 章 中 再 次 介绍 了 与 导航 
按钮 有 关 的 图 标 。 在 这 一 节 中 ， 我 们 将 更 加 具体 地 介绍 jQuery Mobile 1.4 中 的 图 标 集 以 及 图 标 
的 用 法 。 在 本 书 的 第 10 章 ， 讲 解 对 jQuery Mobile 框架 进行 扩展 的 时 候 ， 还 将 继续 介绍 用 户 自 
定义 图 标的 制作 方法 ， 以 及 如 何 为 按钮 和 其 他 屏幕 组 件 设计 特殊 的 样式 。 


7.1.1 几 类 常见 的 按钮 


工具 栏 中 的 返回 按钮 是 由 jQuery Mobile 系统 根据 页 面 加 载 的 历史 记录 自动 添加 的 ， 在 
HTML 代码 中 声明 返回 按钮 并 不 意味 着 网 页 中 一 定 出 现 返 回 按钮 。 工具 栏 中 的 按钮 和 网 页 正文 
中 的 普通 按钮 则 是 根据 HTML 文档 的 定义 ， 显 示 在 网 页 相应 的 位 置 ， 并 被 配 以 特定 的 导航 功 
能 或 者 实现 一 部 分 客户 端 业务 罗 辑 。 这 三 类 常见 按钮 在 网 页 设计 中 依赖 于 jQuery Mobile 中 的 
定制 属性 ， 因 此 ， 熟 悉 这 些 jQuery Mobile 提供 的 定制 属性 ， 对 于 正确 编写 代码 非常 重要 。 

另外 ， 表 单 按钮 在 本 书 的 第 5 章 和 第 6 章 没 有 涉及 ， 而 且 普通 按钮 通常 有 几 种 编写 方法 ， 
普通 按钮 也 可 用 于 表单 ， 因 此 两 者 的 界限 并 不 是 十 分 明确 。 通 过 下 面 集中 讲解 各 种 按钮 ， 读 者 
应 该 对 jQuery Mobile 中 的 各 种 按钮 的 设计 方法 和 编程 特点 有 一 个 更 加 深入 的 了 解 。 

1. 代码 特点 

返回 按钮 仅 用 于 在 网 页 的 工具 栏 页 头 部 分 显示 。 声 明 一 个 返回 按钮 的 基本 方法 如 下 : 

<div data-role="header" data-add-back-btn="true" data-back-btn-text=" 返 回 "> 

<h1> 返 回 按钮 演示 </h1> 

</div> 

在 上 述 代 码 中 ，data-role 属性 明确 表示 当前 正在 定义 网 页 的 页 头 。 对 于 一 个 工具 栏 中 的 返 
回 按钮 ，data-add-back-btn 属性 是 必需 的 。 只 有 通过 data-add-back-btn 属性 ， 系 统 才 会 在 工具 
栏 中 自动 添加 返回 按钮 。 代 码 中 的 另 一 个 属性 data-back-btn-text 是 可 选 的 ， 在 jQuery Mobile 
网 页 设计 中 经 常会 用 到 这 个 属性 ， 用 于 替换 系统 默认 的 按钮 文字 ， 并 且 这 个 属性 能 够 帮助 网 页 
设计 者 便于 实现 网 站 国际 化 (i18n) 的 目的 。 

本 书 第 6 章 在 讲解 工具 栏 的 使 用 方法 时 ,介绍 了 按钮 在 工具 栏 中 的 排列 方式 ， 同 时 提 到 了 
工具 栏 中 的 按钮 ， 除 了 系统 添加 的 返回 按钮 以 外 的 其 他 按钮 依赖 严格 的 HTML 元 素 层次 关系 。 

-个 按钮 在 页 头 中 的 定义 方式 如 下 : 

<div data-role="header" data-position="fixed" data-tap-toggle="false"> 

<a href="#"> 按 钮 </a> 
<h1> 按 钮 演示 </h1l> 
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</div> 


工具 栏 中 的 按钮 是 工具 栏 <div> 元 素 的 直接 子 元 素 <a>。<a> 元 素 在 普通 网 页 中 表现 为 一 个 
超级 链接 ， 但 是 jQuery Mobile 系统 中 ， 如 果 一 个 <a> 元 素 是 工具 栏 的 直接 子 元 素 ， 这 个 <a> 元 
素 就 会 被 自动 转换 成 一 个 按钮 ， 无 需 其 他 特别 说 明 。 

jQuery Mobile 中 的 其 他 按钮 具有 几 种 不 同 的 代码 编写 方式 ， 基 本 方法 如 下 : 


过 
<a href="#"” data-role="button"> 按 钮 </a> 


< 


<a href="#"” class="ui-btn"> 按 钮 </a> 


<!-- 方法 3 --> 

<button> 按 钮 </button> 

以 上 3 种 方法 都 能 通过 jQuery Mobile 创建 一 个 按钮 。 其 中 第 一 种 和 第 二 种 方法 使 用 了 <a> 
元 素 ， 这 两 种 方法 的 作用 几乎 相同 。 

当 在 网 页 中 使 用 第 一 种 方法 时 ，jQuery Mobile 会 自动 地 把 网 页 中 的 相关 HTML 语句 替换 
成 方法 2 中 的 形式 。 网 页 开发 人 员 也 可 以 直接 使 用 第 二 种 方法 。 

<button> 本 身 就 能 够 在 网 页 上 创建 一 个 按钮 , 但 是 这 样 的 按钮 不 符合 移动 网 页 的 设计 要 求 。 
当 使 用 了 jQuery Mobile 以 后 , jQuery Mobile 框架 自动 对 <button> 的 样式 进行 了 增强 , 使 按钮 的 
显示 方式 符合 移动 设备 的 界面 设计 要 求 。 

在 上 述 3 种 方法 中 , 第 一 种 方法 使 用 了 jQuery Mobile 的 定制 属性 data-role="“button”, 第 二 
种 方法 使 用 了 由 jQuery Mobile 框架 本 身 提供 的 CSS 类 。 

从 本 质 上 说 ， 在 HTML 语句 中 出 现 的 jQuery Mobile 定制 属性 都 会 被 系统 替换 为 CSS 类 。 
CSS 才 是 jQuery Mobile 对 于 HTML 文档 的 样式 进行 加 强 的 根本 原因 。<button> 元 素 在 jQuery 
Mobile 网 页 中 的 样式 特征 也 是 由 CSS 赋予 的 。 

表单 按钮 通常 是 指 与 HTML 文档 中 的 表单 元 素 <form> 有 关 的 按钮 。<input> 元 素 中 的 几 种 
类 型 (type) 是 最 常见 的 表单 按钮 。 这 些 类 型 包括 button( 普 通 按钮 )、reset( 重 置 按钮 ) 和 submit( 发 
送 /提交 按钮 )。 举 例如 下 : 

<!-- 普通 按钮 --> 


<input type="button"” value=" 按 钮 "> 


<!-- 重 置 按钮 --> 


<input type="reset"” value=" 重 置 "> 


<!-- 提交 按钮 --> 

<input type="submit"” value=" 提 交 "> 

以 上 3 种 按钮 通常 用 于 表单 (<form>) 中 。 如 果 仅仅 从 HTML 语法 的 角度 来 看 ,这 3 种 按钮 
完全 可 以 用 在 表单 以 外 ， 但 是 这 些 按钮 本 应 起 到 的 作用 将 不 能 发 挥 。 

代码 7.1 演示 了 几 类 常见 的 按钮 : 工具 栏 中 的 返回 按钮 ， 工 具 栏 按钮 ， 网 页 正文 中 的 普通 
按钮 ， 以 及 表单 按钮 。 
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代码 7.1 几 类 按钮 的 演示 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - buttons</title> 
Pe 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link href="js/jquery-mobile-classic-theme/theme-classic.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" id="home"> 
<div data-role="header" 
data-position="fixed" data-tap-toggle="false" 
data-add-back-btn="true"” data-back-btn-text=" 返 回 "> 
<hl> 按 钮 演示 </hl1> 
</div> 
<div class="ui-content" role="main"> 
<a href="#page2"” data-role="button"> 按 钮 : 第 二 页 </a> 
</div> 
<div data-role="footer" data-position="fixed" data-tap-toggle="false"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
<div data-role="page" id="page2"> 
<div data-role="header" data-position="fixed" data-tap-toggle="false" 
data-add-back-btn="true" data-back-btn-text=" 返 回 "> 
<h1> 第 二 页 </h1> 
<a href="#" class="ui-btn-right"> 按 钮 1: &lt;aggt;</a> 
</div> 
<div class="ui-content" role="main"> 
<a href="#" data-role="button"> 
按钮 2: data-role=g&quot;buttongquot; </a> 
<a href="#" class="ui-btn"> 
按钮 3: class=&quot;ui-btngquot;</a> 
<button> 按 钮 4: &lt;buttonggt;</button> 
<input type="button"” value=" 按 钮 5: type=&quot;button&gquot;"> 
<input type="reset" value=" 按 钮 6: type=&quot;reset&quot;"> 
<input type="submit"” value=" 按 钮 7: type=&quot;submit&quot;"> 
</div> 


<meta charset: 


<div data-role="footer™" 
data-position="fixed" data-tap-toggle="false"> 
<h6> 页 尾 </h6> 
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</div> 
</div> 
</body> 
</html> 
图 7.1 演示 了 这 4 类 按钮 在 浏览 器 中 的 实际 显示 方式 。 从 表现 形式 来 看 ， 后 两 类 按钮 在 网 
页 正文 中 的 默认 样式 是 一 致 的 。 单 单 从 按钮 的 外 观 来 看 ， 并 不 能 区 分 这 两 类 按钮 。 在 移动 项 目 
开发 中 ， 按 钮 的 样式 需要 进一步 定制 ， 才 能 满足 移动 用 户 界面 的 设计 要 求 。 


jqm.webhop.me/CH07/ 全 【Google 


Quxn 第 二 页 。。 按 组 : ca> 


按钮 2 : data-role="button” 
按钮 3 : class="ul-btn" 
按钮 4: <button> 
按钮 5: type="button" 
按钮 6: type="reset” 


按钮 7: type="submit 


页 尾 
“> 蝇 硬 - 


7.1 几 类 常见 按钮 和 默认 显示 样式 


2. 按钮 的 动作 


从 按钮 的 行为 特点 来 看 ， 上 述 4 类 按钮 的 作用 是 不 同 的 。 工 具 栏 中 的 返回 按钮 是 一 种 特殊 
的 导航 按钮 。 返 回 按钮 按照 网 页 访问 的 历史 记录 往 回 追溯 。 工具 栏 中 的 按钮 可 以 用 作 导 航 按钮 ， 
也 可 以 用 作 功 能 按钮 。 这 一 类 按钮 的 使 用 方法 在 很 大 程度 上 取决 于 移动 网 站 的 设计 方案 。 工 具 
栏 中 的 常见 导航 按钮 包括 返回 主页 的 按钮 ， 指 向 版 权 信 息 和 隐私 保护 条 款 的 按钮 等 。 在 导航 按 
钮 上 绑 定 导航 动作 的 基本 方法 是 <a href=“url*>， 从 本 质 上 说 ， 导 航 按钮 与 HTML 代码 中 的 <a> 
元 素 超级 链接 的 作用 十 分 相似 。jQuery Mobile 能 够 通过 Ajax 方式 加 载 页 面 ， 以 及 在 网 页 切换 
过 程 中 的 过 渡 效 果 是 jQuery Mobile 导航 按钮 与 普通 HTML 网 页 中 <a> 元 素 超级 链接 之 间 的 最 
显著 的 区 别 。 

工具 栏 中 常见 的 功能 按钮 包括 登录 按钮 、 搜 索 按钮 等 。 网 页 正文 内 容 中 的 按钮 同样 既 可 以 
用 作 导 航 按钮 ， 也 可 以 用 作 功 能 按钮 。 在 本 书 的 第 $ 章 中 已 经 出 现 了 网 页 正文 中 的 导航 按钮 实 
例 。 在 实际 的 商业 移动 网 站 设计 中 ， 网 页 正文 中 的 按钮 更 多 地 是 被 用 于 执行 特定 的 业务 逻辑 。 
业务 逻辑 由 绑 定 到 按钮 上 的 一 段 JavaScript 程序 来 实现 。 

代码 7.2 演示 了 在 一 个 功能 按钮 上 实现 业务 逻辑 的 方法 之 一 


代码 7.2 ”按钮 事件 的 处 理 


<!DOCTYPE html> 
<html> 
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<head> 


<title>jQuery Mobile - button action</title> 

<meta charset="utf-8" /> 

<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 

<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 

<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<script> 


$ (document) .on ("pagecreate",function() { 


$("#button bold") .click (function() { 
$("#demoField") .css ("font-weight", "700"); 
Fs 
$(" #button normal ") .click(function() { 
$("#demoField") .css ("font-weight", "normal"); 
Ds 
DD); 


</script> 
</head> 


<body> 


<div data-role="page"> 


<div data-role="header" data-position="fixed" data-tap-toggle="false"> 
<h1> 按 钮 处 理 演示 </h1> 

</div> 

<div class="ui-content" role="main"> 
<a href="#" data-role="button" id="button bold"> 粗 体 字 </a> 
<a href="#" data-role="button"” id="button normal"> 复 原 </a> 
<div id="demoField"> 测 试 </div> 

</div> 

<div data-role="footer" data-position="fixed" data-tap-toggle="false"> 
<h6> 页 尾 </h6> 

</div> 


</div> 
</body> 
</html> 
在 按钮 上 绑 定 事件 处 理 程序 由 jQuery 的 clickO 事 件 处 理 程序 完成 。 读 者 可 以 参考 本 书 第 4 
章 中 关于 jQuery 对 于 事件 处 理 的 介绍 。 同样 , 利用 JavaScript 中 的 onclickO 是 一 个 有 效 的 选择 。 
两 者 在 时 序 问题 上 有 差别 。 代 码 7.2 中 包含 了 两 个 按钮 ， 但 任何 一 个 按钮 被 按 下 以 后 ， 响 应 的 


| 


有 件 处 理 程序 就 会 对 “测试 ”文字 进行 字体 样式 的 改变 ， 如 图 7.2 所 示 。 在 更 复杂 的 应 用 中 ， 


-个 按钮 可 能 会 触发 网 络 Ajax 访问 ， 并 把 结果 显示 在 网 页 上 。 


北 注意 : 


246 < 


在 本 书 第 4 章 介绍 jQuery 的 时 候 ,HTML 网 页 文档 中 必须 使 用 $(document).ready() 
方法 确保 对 网 页 文档 的 处 理 在 文档 加 载 完成 以 后 进行 。 这 个 方法 一 般 情况 下 在 
jQuery Mobile 里 不 适用 。 由 于 jQuery Mobile 是 在 页 面 导航 发 生 时 使 用 Ajax 加 载 
指定 的 页 面 ，ready0 方 法 实际 上 只 对 HTML 文档 中 的 第 一 个 页 面 有 效 。 因 此, 需 
要 对 一 个 jQuery Mobile 页 面 加 载 以 后 做 必要 处 理 时 ， 应 该 使 用 $(document).bind 
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(“pagecreate”)。pagecreate 事件 能 够 在 页 面 由 Ajax 或 者 其 他 方式 加 载 到 DOM 以 
后 ， 在 页 面 初始 化 时 完成 。 


jqmwebhop.me/CHo7/ 去 图 Google  ] jqmwebhop.me/CH07, 去 图 socse jqmwebhop.me/CH07/ 去 莉 soose  ] 


按钮 处 理 演示 按钮 处 理 演示 按钮 处 理 演示 
担 体 字 | 粗 体 字 | 租 体 字 
复原 复原 | 复原 
测试 测试 测试 
页 忆 页 尾 页 必 
ha > 和 已 加 - 和 已 加 - 


图 7.2 网 页 的 初始 状态 及 响应 按钮 事件 以 后 的 状态 


3 注意 : ”一 些 网 上 的 教程 和 实例 中 使 用 了 pagecreate 或 者 pageinit 事件 ， 两 者 的 作用 十 分 
相似 。pagecreate 事件 曾经 被 pageinit 取代 。 但是， 在 jQuery Mobile 1.4 中 ,不 再 
建议 使 用 pageinit 事件 ， 而 又 重新 建议 使 用 pagecreate。 


7.1.2 按钮 的 基本 样式 


按钮 和 按钮 中 的 图 标 可 以 按照 网 站 用 户 界面 的 需要 设计 成 各 具 独 特 风格 的 样式 。jQuery 
Mobile 框架 提供 了 样式 属性 ， 直 接 在 HTML 文档 中 描述 按钮 具有 的 样式 特点 ， 同 时 ，jQuery 
Mobile 也 提供 了 对 应 的 CSS 类 ， 达 到 同样 的 目的 。 
表 7.1 反映 出 并 不 是 所 有 的 样式 定制 都 包括 了 定制 属性 和 CSS 类 两 种 方法 。 如 果 一 种 定制 
E 式 可 以 采用 定制 属性 或 者 CSS 类 ， 那 么 ， 当 定制 属性 的 属性 值 为 tue 时 的 作用 与 直接 添加 
CSS 类 的 作用 是 相同 的 。 
data-role=“none” 的 作用 比较 特殊 。 当 jQuery Mobile 初始 化 一 个 网 页 时 ,会 对 UI 组 件 进 行 
样式 增强 ， 也 就 是 对 一 个 普通 的 HTML 元 素 赋 予 不 同样 式 ， 甚 至 是 局 部 替换 ， 达 到 为 移动 设 
备 优化 的 目的 。 经 过 优化 以 后 ， 我 们 看 到 的 按钮 、 多 选 按 钮 、 列 表 UI 组 件 等 其 实 已 经 与 原 有 
的 显示 样式 有 非常 大 的 差别 。data-role=“none” 用 于 阻止 样式 增强 过 程 ， 使 HTML 元 素 在 浏览 
器 中 按照 浏览 器 的 默认 方式 显示 。data-role=“none” 可 以 被 插入 到 很 多 UI 组 件 的 HTML 元素 标 
签 中 ， 达 到 相同 的 目的 。 
使 一 个 按钮 失效 可 以 分 为 两 种 情况 。 若 一 个 按钮 由 <a> 元 素 形 成 ，CSS 类 ui-state-disabled 
能 够 使 <a> 按 钮 失效 。 如 果 一 个 按钮 由 <button> 元 素 形成 ， 由 于 <button> 元 素 本 身 带 有 一 个 
disabled 属性 ， 能 够 使 按钮 处 于 失效 状态 ， 因 此 通过 <a> 和 <button> 形 成 的 按钮 应 该 使 用 不 同 的 
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方法 使 其 失效 。 另 外 ， 读 者 需要 注意 HTML 中 的 disabled 属性 属于 布尔 类 型 ， 属 性 值 见 表 7.1 
中 的 说 明 ， 而 不 是 其 他 属性 所 采用 的 true 或 者 false。 


表 7.1 按钮 的 基本 样式 


属 性 属性 值 CSS 类 样式 描述 
当 属 性 值 为 tue 时 ， 按 钮 的 宽度 随 着 按 
钮 上 文字 或 者 图 标 内 容 而 改变 
data-mini true | false ui-mini 迷你 (紧凑 ) 型 按钮 
data-shadow true | false ui-shadow 属性 值 为 tue 时， 按钮 呈现 出 阴影 效果 
与 其 他 UI 组 件 一 样 ,通过 样式 样本 赋予 
一 个 可 组 件 特定 的 样式 主题 
属性 值 为 rue 时 , 按钮 的 4 个 角 为 圆 角 ， 
否则 为 直角 
ui-state-disabled ”| 使 <a> 按 钮 失效 
disabled 缺 省 ， 或 …， 或 “disabled” 使 <button> 按 钮 失效 
取消 jQuery Mobile 对 按钮 的 样式 改变 。 
保留 原始 样式 

代码 7.3 演示 了 按钮 的 几 种 基本 样式 定制 方法 ， 其 中 包括 了 两 种 失效 按钮 、inline 样式 、 
无 阴影 和 4 个 角 都 是 直角 的 按钮 ， 显 示 效 果 如 图 7.3 所 示 。 

[> | 
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data-inline true | false ui-btn-inline 


data-theme 样式 样本 a~z 


data-corners true | false ui-corner-all 


data-role data-role="none™ 


按 馈 样式 


图 7.3 按钮 的 各 种 基本 样式 在 Android 版 Chrome 浏 览 器 上 的 实际 显示 效果 


代码 7.3 ”按钮 演示 


<!DOCTYPE html> 


<html> 
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<head> 
<title>jQuery Mobile - button style</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" id="home"> 
<div data-role="header" data-position="fixed" data-tap-toggle="false"> 
<h1> 按 钮 样式 </h1> 
</div> 
<div class="ui-content" role="main"> 
<button disabled> 失 效 状态 </button><br> 
<a href="#" class="ui-btn ui-state-disabled"> 失 效 状态 </a><br> 
<a href="#" data-role="button" data-inline="true">inline</a><br> 
<a href="#" data-role="button" data-shadow="false"> 无 阴影 </a><br> 
<a href="#" data-role="button"” data-corners="false"> 直 角 边框 </a><br> 
</div> 
<div data-role="footer" data-position="fixed" data-tap-toggle="false"> 
<h6> 页 尾 </h6> 
</div> 
</div> 
</body> 
</html> 


7.1.3 ”按钮 图 标 


我 们 已 经 在 第 5 章 中 见 到 了 jQuery Mobile 提供 的 图 标 。 这 些 在 系统 中 内 置 的 图 标 被 广泛 
地 用 于 按钮 和 列表 视图 等 UI 组 件 。 按 钮 不 具有 默认 图 标 ， 在 开发 过 程 中 ， 需 要 为 一 个 按钮 单 
独 设置 图 标 。 通 过 下 面 两 种 方法 之 一 ， 可 以 为 一 个 按钮 添加 图 标 。 

@ HTML 标签 属性 : data-icon=“ 图 标 名 ”。 

@ CSS 类 : ui-icon- 图 标 名 。 

以 home 图 标 为 例 , 在 一 个 按钮 中 使 用 data-icon=“home” 或 者 CSS 
类 class=“ui-icon-home” 都 能 够 实现 一 个 如 图 7.4 所 示 的 home 图 标的 区 “有 
目的 。 jQuery Mobile 系统 提供 了 大 量 的 图 标 ， 这 些 图 标 可 以 满足 常规 
网 站 的 需求 。 本 书 第 10 章 将 介绍 扩展 jQuery Mobile 框架 的 方法 ， 其 7.4 ”home 图 标 
中 就 包括 了 扩展 系统 图 标 和 自 定义 图 标的 方法 。 

表 7.2 列举 了 jQuery Mobile 图 标 集中 的 所 有 50 个 图 标的 名 称 和 与 之 对 应 的 图 标 图 案 。 由 
于 每 一 个 图 标 都 可 以 单独 设置 样式 风格 样本 (swatch)， 图 标 按钮 本 身 也 可 以 进行 额外 的 样式 定 
义 ， 图 标 在 不 同 的 网 页 中 可 能 会 显得 略 有 不 同 。 了 解 了 jQuery Mobile 系统 提供 的 图 标 ， 将 有 
助 于 充分 利用 现 有 的 图 标 来 为 设计 中 的 网 站 服务 。 
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表 7.2 jQuery Mobile 中 的 50 个 内 置 图 标 


图 标 名 图 标 标 名 图 标 
aITOW-T alITOW-U-T 
arrow-u arrow-u-] 
arrow-l] arrow-d-] 
arrow-d aITOW-d-T 
carat-T carat-u 
carat-] carat-d 
check delete 
plus minus 
navigation home 
refresh back 
forward recycle 
forbidden search 
edit comment 
tag location 
mail clock 
eye bullets 
star cloud 
grid bars 
gear action 
info alert 
user shop 
heart lock 
camera phone 
audio Video 
calendar 了 power 

1. 按钮 中 的 图 标 


-个 按钮 中 的 图 标 可 以 起 到 按钮 文字 的 补充 作用 ， 也 可 以 不 依赖 于 按钮 文字 ， 独 自体 现 按 
钮 的 作用 。 当 在 一 个 按钮 中 同时 包含 文字 和 图 标 时 ， 图 标 出 现在 按钮 的 左 侧 。 我 们 也 可 以 通过 
属性 data-iconpos 把 图 标 指定 到 按钮 的 左 、 上 、 右 、 下 等 不 同 的 位 置 。 

250 & 


第 7 章 jQuery Mobile 的 UI 组 件 


代码 7.4 通过 实例 演示 了 相关 的 按钮 图 标 位 置 在 网 页 中 的 编写 方法 。 
代码 7.4 图 标 在 按钮 中 的 显示 位 置 演示 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - icons</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link href="js/jquery-mobile-classic-theme/theme-classic.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="b"> 
<div data-role="header"> 
<h1> 按 钮 与 图 标 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="#" data-role="button" data-icon="home" 
data-theme="b"> 图 标 按钮 </a> 
<a href="#" data-role="button" data-icon="home" 
data-theme="b" data-iconpos="right" > 右 </a> 
<a href="#" data-role="button" data-icon="home" 
data-theme="b" data-iconpos="top"> 上 </a> 
<a href="#" data-role="button" data-icon="home" 
data-theme="b" data-iconpos="left"> 左 </a> 
<a href="#" data-role="button" data-icon="home" 
data-theme="b" data-iconpos="bottom"> 下 </a> 
<a href="#" data-role="button" data-icon="home" 
data-theme="b" data-iconpos="notext"> 无 文字 </ a> 
<a href="#" data-role="button" data-icon="home™" 
data-theme="b" data-iconpos="notext" 
data-corners="false"> 无 文字 </a> 
</div> 
</div> 
</body> 
</html> 


显示 效果 如 图 7.5 所 示 。 

按钮 中 ， 图 标 如 果 被 指定 放置 在 左 侧 或 右 侧 ， 图 标 显示 在 靠近 按钮 左右 两 端的 位 置 。 属 性 
data-iconpos 除了 用 于 指定 图 标 显 示 位 置 以 外 ， 还 能 够 接受 属性 值 “notext*。 这 个 属性 值 用 于 指 
明 按 钮 只 能 显示 图 标 ， 即 使 <a> 元 素 包 含 了 文字 内 容 ， 文 字 内 容 仍 然 会 被 忽略 。 

另外 ， 按 钮 的 默认 样式 为 圆 角 。 当 在 一 个 按钮 上 显示 图 标 时 ， 这 个 按钮 会 变 成 圆 形 。 如 果 
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对 一 个 只 包含 图 标的 按钮 用 data-comers="“false” 修 饰 以 后 , 按钮 上 默认 的 圆 角 样式 就 会 被 移 除 ， 
这 时 按钮 就 会 变 成 长 方形 。 


图 标 按钮 


A 
J 
下 
A 
© 
回 


忆 一 - 


图 7.5 图 标 在 按钮 中 的 位 置 
图 7.5 中 的 最 后 两 个 按钮 就 是 只 包含 图 标的 圆 形 和 方形 按钮 。 
按钮 中 ， 图 标的 显示 位 置 除了 可 以 通过 属性 方式 来 定义 外 ， 还 可 以 直接 通过 CSS 类 的 方 
式 来 定义 。 表 7.3 列举 了 与 图 标 显示 位 置 相 关 的 属性 和 与 之 相对 应 的 CSS 类 。 
表 7.3 图 标 按钮 的 样式 设置 方法 


属性 | 属性 值 | css 类 | 样式 描述 


Ui-btn-icon-left 


ui-btn-icon-top 把 图 标 放 置 在 按钮 的 左 、 上 、 右 、 


left | top | right | bottom 
data-iconpos els ui-btn-icon-right 下 等 位 置 


ui-btn-icon-bottom 


ui-btn-icon-notext 无 文字 图 标 按钮 


2. 图 标的 样式 


从 图 7.4 和 图 7.5 中 很 容易 观察 到 ， 按 钮 中 的 图 标 (图 标 选 自 系统 图 标 集 ) 都 是 以 白色 呈现 。 
jQuery Mobile 同时 也 提供 了 一 套 替换 图 标 ， 以 黑色 呈现 。 当 使 用 替换 (黑色 ) 图 标 时 ， 为 按钮 添 
加 CSS 类 ui-alt-icon 即 可 。 下 面 的 代码 就 能 够 把 正常 的 白色 图 标 替换 为 黑色 图 标 : 

<a href="#" 

class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-top ui-alt-icon"> 
黑色 图 标 </a> 

图 7.6 演示 了 正常 (白色 ) 图 标 按钮 和 替换 (黑色 ) 图 标 按钮 的 对 比 效果 。 

在 各 种 按钮 图 标的 演示 中 ， 图 标 处 于 一 个 圆 形 背景 (disc) 之 中 。 在 一 些 场合 ， 需 要 把 圆 形 
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背景 去 除 ， 使 图 标 与 按钮 的 背景 完全 融合 ， 如 图 7.7 所 示 。 


© 合 
正常 图 标 黑色 图 标 


图 7.6 白色 与 黑色 按钮 图 标 


图 7.7 拥有 和 去 除 图 标 背 景 的 按钮 
在 这 种 情况 下 ， 可 以 借用 下 面 代码 片段 中 的 ui-nodisc-icon 类 ， 就 非常 容易 地 达到 去 除 圆 
形 背景 的 目的 : 
<a href="#" 
class="ui-btn ui-btn-inline ui-icon-home ui-btn-icon-top ui-nodisc-icon"> 
主页 </a> 
图 标的 背景 可 以 通过 为 每 一 个 按钮 图 标 单独 添加 ui-nodisc-icon 类 的 方法 消除 ， 也 可 以 像 
下 面 的 代码 片段 一 样 ， 直 接 把 ui-nodisc-icon 类 添加 到 一 组 按钮 的 容器 上 ， 那 么 ， 这 一 组 按钮 
中 ， 图 标 将 都 不 再 拥有 圆 形 背景 : 
<div class="ui-nodisc-icon"> 
<a href="#" class="ui-btn ui-btn-inline ui-icon-plus ui-btn-icon-top"> 增 加 </a> 


<a href="#" class="ui-btn ui-btn-inline ui-icon-minus ui-btn-icon-top"> 减 少 </a> 
</div> 


[图 说 明 : ”jQuery Mobile 1.4x 目前 仍然 支持 与 按钮 阴影 相关 的 设置 ， 包 括 适用 于 <input> 类 
型 按钮 的 标签 属性 ， 如 data-iconshadow=“true”， 或 者 对 于 按钮 普遍 使 用 的 CSS 
类 ui-shadow-icon。 以 上 标签 属性 和 CSS 类 已 经 不 再 建议 使 用 ， 并 且 将 在 jQuery 
Mobile 1.5 中 被 删除 。 


| 刚 说 明 : 本 章 介绍 jQuery Mobile 图 标 以 及 内 置 图 标 在 按钮 中 的 应 用 方法 。 按钮 还 能 在 其 
他 很 多 UI 组 件 中 使 用 . 按钮 在 每 一 种 UI 组 件 中 的 使 用 方法 和 行为 特点 都 有 所 不 
同 ， 本 书 将 在 具体 到 某 一 种 UI 组 件 时 陆续 介绍 更 多 的 图 标 用 法 。 


7.2 ”表单 输入 元 素 


本 节 将 介绍 由 HTML 中 的 <input> 元 素 形成 的 表单 元 素 , 这些 UI 元 素 包 括 了 单 选 按钮 、 多 
选 按钮 ， 以 及 各 种 输入 框 等 。 它 们 的 共同 特点 是 用 于 用 户 输入 ， 这 些 UI 元 素 在 jQuery Mobile 
中 的 作用 与 它们 在 HTML 普通 网 页 中 的 作用 是 一 致 的 ，jQuery Mobile 对 于 这 些 表单 元 素 进行 


六 253 


国 jQuery Mobile 移 动 网 站 开发 


了 针对 移动 设备 的 优化 ， 并 且 提 供 了 大 量 的 定制 方法 。 同 时 需要 注意 的 是 ， 这 些 表单 UI 元 素 
与 通过 <input> 形 成 的 用 于 事件 处 理 的 按钮 在 样式 表现 和 作用 上 存在 很 大 的 不 同 。 


7.2.1 单 选 按钮 和 多 选 按钮 


1. 单 选 按钮 和 多 选 按钮 的 基本 形态 


jQuery Mobile 中 的 单 选 按钮 和 多 选 按钮 能 够 表现 为 不 同 的 样式 , 它们 的 基本 编程 方法 与 普 
通 HTML 网 页 的 编写 方法 相同 ,都 是 以 <input> 元 素 为 基础 ,并 且 通 过 分 别 指定 type 属性 为 radio 
或 者 checkbox 来 确定 输入 元 素 的 具体 类 型 是 单 选 按 钮 或 者 是 多 选 按 钮 ( 即 复 选 框 )。 以 单 选 按 钮 
为 例 ， 代 码 7.5 演示 了 单 选 按钮 通过 jQuery Mobile 优化 后 的 基本 形态 。 


代码 7.5 ”使 用 单 选 按钮 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - checkboxradio</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 单 选 按钮 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form> 
<label for="fruit1"> 苹 果 </label> 
<input type="radio" name="fruit" id="fruitl" value="apple" /> 
<label for="fruit2"> 香 燕 </label> 
<input type="radio" name="fruit" id="fruit2" value="banana" /> 
<label for="fruit3"> 和 葡萄 </label> 
<input type="radio" name="fruit" id="fruit3" value="grade" /> 
<label for="fruit4"> 西 瓜 </label> 
<input type="radio" name="fruit" id="fruit4" value="water melon"/> 
</form> 
</div> 
</div> 
</body> 
</html> 


运行 效果 如 图 7.8 所 示 。 
由 于 多 选 按钮 与 单 选 按钮 在 代码 上 的 主要 区 别 在 于 <input> 元 素 的 type 属性 ， 因 此 ， 只 要 
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把 代码 7.5 中 的 表单 简单 地 替换 为 下 面 的 代码 片段 ， 就 能 够 得 到 如 图 7.9 所 示 的 多 选 按钮 : 


<form> 

<label for="fruit1"> 芋 果 </label> 

<input type="checkbox" name="fruits" id="fruitl" value="apple" /> 
<label for="fruit2"> 香 燕 </label> 

<input type="checkbox" name="fruits" id="fruit2" value="banana" /> 
<label for="fruit3"> 葡 萄 </label> 

<input type="checkbox" name="fruits" id="fruit3" value="grade" /> 
<label for="fruit4"> 西 瓜 </label> 

<input type="checkbox" name="fruits" id="fruit4" value="water melon" /> 


</form> 
Ce (coge 
单 选 按钮 多 选 按钮 
苹果 苹果 
〇 竺 车 香 莱 
划 萄 葡萄 
西瓜 西瓜 
ha 器 轩 一 如 已 “加 
7.8 单 选 按钮 图 7.9 多 选 按钮 
2. 样式 定制 


与 迷你 (紧凑 ) 型 按钮 一 样 ， 单 选 按钮 和 多 选 按钮 也 同样 支 
持 data-mini=“true”， 使 单 选 和 多 选 按钮 的 显示 样式 更 加 紧凑 。 
图 7.10 演示 了 普通 单 选 按钮 和 迷你 型 单 选 按钮 的 实际 显示 效 香 藻 
果 对 比 。 其 中 的 迷你 型 单 选 按钮 就 是 通过 下 面 的 一 行 代 码 实 
现 的 ， 在 这 一 行 代码 中 ，data-mini 属性 被 添加 到 单 选 按钮 所 图 7.10 迷你 型 和 普通 单 选 
在 的 <input> 元 素 中 : 按钮 的 对 比 
<label for="fruit1"> 芋 果 </label> 
<input type="radio" name="fruit" id="fruitl" data-mini="true" value="apple" /> 
单 选 按钮 和 多 选 按钮 在 jQuery Mobile 中 的 基本 样式 与 它们 在 普通 网 页 中 的 样式 有 一 个 共 
同 点 ， 就 是 每 一 个 选项 彼此 独立 ， 互 不 相连 。 当 同一 个 网 页 出 现 两 组 或 者 更 多 的 单 选 按钮 或 者 
多 选 按钮 时 ， 每 一 组 之 间 并 不 是 很 容易 区 分 的 。 这 样 ， 对 于 单 选 按钮 或 者 多 选 按钮 的 分 组 就 变 
得 十 分 必要 。 
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代码 7.6 演示 了 一 个 把 多 个 单 选 按钮 编 为 一 组 的 实例 。 
代码 7.6 ”通过 controlgroup 为 单 选 或 者 多 选 按钮 分 组 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - checkboxradio</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link href="js/jquery-mobile-classic-theme/theme-classic.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="b"> 
<div data-role="header"><h1> 分 组 选择 </h1></div> 
<div class="ui-content" role="main"> 
<form> 
<fieldset data-role="controlgroup"> 
<label for="fruit1"> 草 果 </label> 
<input type="radio" name="fruit" id="fruitl" value="apple" /> 
<label for="fruit2"> 香 蔽 </1abe1> 
<input type="radio" name="fruit" id="fruit2" value="banana" /> 
<label for="fruit3"> 葡 萄 </1abel> 
<input type="radio" name="fruit" id="fruit3" value="grade" /> 
<label for="fruit4"> 西 瓜 </label> 
<input type="radio" name="fruit" id="fruit4" 
value="water melon"/> 
</fieldset> 
</form> 
</div> 
</div> 
</body> 
</html> 


运行 效果 如 图 7.11 所 示 。 

代码 7.6 中 ， 为 需要 分 为 一 组 的 单 选 按 钮 增加 了 一 个 容器 <fieldset>， 并 且 把 <fieldset> 的 
data-role 属性 设置 为 “controlgroup”。 

<fieldset> 是 HTML 代码 用 于 在 表单 中 组 合 多 个 字段 元 素 的 通用 方法 ，jQuery Mobile 并 没 
有 必须 使 用 <fieldset> 的 显示 ， 如 果 单 选 或 者 多 选 按钮 的 容器 是 <div> 元 素 ， 只 要 在 容器 中 添加 
data-role=“controleroup”， 就 能 够 达到 同样 的 目的 。 

被 编 为 一 组 的 单 选 按钮 在 默认 情况 下 仍然 按照 图 7.11 中 那样 以 垂直 方式 排列 。 如 果 在 
<fieldset> 中 设置 data-type“horizontal”, 那么 单 选 按钮 组 合 将 以 水 平方 式 排列 , 如 图 7.12 所 示 。 
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localhosvcHo7/iqm.ra 克 着 6o0ge  ] 


分 组 选择 


jqm.webhop.me/cHo7/ 克 荐 6008=  ]】 


分 组 选择 

= 
， 香 系 
剖面 
西瓜 


和 入口 可 - 
图 7.11 被 编 为 一 组 的 单 选 按钮 图 7.12 水 平 排列 的 一 组 单 选 按钮 

当 一 组 单 选 按 钮 水 平 排列 时 ， 按钮 的 样式 与 平常 所 见 的 单 选 按钮 明显 不 同 ， 原先 用 于 表示 
按钮 是 否 被 选择 的 图 标 被 自动 隐藏 ， 同 一 组 中 的 各 个 单 选 按钮 并 列 形成 一 排 ， 并 且 只 有 左右 两 
个 按钮 的 外 角 县 有 圆 弧 样式 。 

被 编 为 一 组 的 单 选 和 多 选 按钮 除了 能 够 改变 垂直 和 水 平 排列 方式 以 外 , 还 可 以 与 按钮 一 样 
能 够 改变 图 标的 显示 位 置 ， 以 及 能 够 被 设置 成 迷你 按钮 。 

代码 7.7 通过 一 组 多 选 按 钮 ， 演 示 了 了 在 <fieldset> 容 器 中 应 用 data-mini 和 data-iconpos 的 
实例 。 这 两 个 属性 在 单 选 或 者 多 选 按 钮 组 合 中 的 作用 与 在 按钮 中 的 作用 是 相同 的 。 

代码 7.7 迷你 型 多 选 按 钮 与 图 标 显示 位 置 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - checkboxradio</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link href="js/jquery-mobile-classic-theme/theme-classic.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 


<body> 
<div data-role="page" data-theme="b"> 
<div data-role="header"> 
<h1> 多 选 按钮 </h1> 


</div> 
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<div class="ui-content" role="main"> 
<form> 
<fieldset data-iconpos="right" data-mini="true"> 

<legend> 你 最 喜欢 的 水 果 </legend> 

<label for="fruit1"> 革 果 </label> 

<input type="checkbox" name="fruits" id="fruitl" 
Value="apple"” checked="" /> 

<label] for="fruit2"> 香 磋 </label> 

<input type="checkbox" name="fruits" id="fruit2" 
value="banana" checked="" /> 

<label for="fruit3"> 葡 萄 </label> 

<input type="checkbox”" name="fruits" id="fruit3" 
value="grade" checked="" /> 

<label for="fruit4"> 西 瓜 </label> 

<input type="checkbox" name="fruits" id="fruit4" 
Value="water melon" checked="" /> 

</fieldset> 
</form> 
</div> 
</div> 
</body> 
</html> 


运行 结果 如 图 7.13 所 示 。 


localhost/CHO7/jqm_ch 高 [coogle 


多 选 按钮 


你 总 喜欢 的 水 果 


7.13 图标 显示 在 右 侧 的 迷你 型 多 选 按钮 


单 选 与 多 选 按 钮 的 图 标 在 理论 上 能 够 像 其 他 按钮 一 样 被 安置 在 按钮 的 上 、 下 、 左 、 右 4 个 
位 置 。 但 是 ， 在 实际 的 单 选 和 多 选 按钮 组 合 中 ， 上 、 下 两 个 位 置 在 默认 状态 下 会 有 无 法 居中 对 
齐 的 问题 ， 直 接 使 用 这 两 个 显示 位 置 并 不 合适 。 
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7.2.2 文本 输入 框 


1. 字段 类 型 以 及 表现 方式 的 多 样 化 


jQuery Mobile 中 的 输入 框 可 以 被 看 作 HIML 5 中 <input> 输 入 框 加 上 <textarea> 的 增强 版 。 
文本 输入 框 在 jQuery Mobile 和 普通 网 页 中 的 本 质 是 相同 的 。HTML 5 中 各 种 通过 type 属性 指 
定 的 输入 类 型 (包括 HTML 5 中 新 增加 的 类 型 ) 可 以 直接 在 jQuery Mobile 中 使 用 。 

代码 7.8 演示 了 4 种 典型 的 输入 类 型 : 文本 (text)、 日 期 (date)、 电子 邮件 (emaiD)、 颜 色 (colon) 。 
除了 文本 类 型 输入 框 以 外 ， 其 他 类 型 可 能 在 某 些 浏览 器 中 不 被 完全 支持 ， 或 者 表现 形式 非常 不 
同 。 图 7.14 是 这 段 代 码 中 date 字段 显示 在 Opera 移动 浏览 器 (模拟 器 ) 中 ， 并 且 聚 焦 在 date( 日 
期 ) 字 段 时 的 情形 。 
[ea] 


a| + 月 ll 2014 


| 
加 2345 
678910112 
13 14 15 16 17 18 19 
20 21 22 23 [E025 26 
27 28 29 30 31 


电子 邮件 

颜色 
EE 
ba > 


7.14 ”Opera 模 拟 器 中 的 date 字 段 


代码 7.8 ”四 种 典型 的 输入 框 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - textinput</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
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<h1> 文 本 输入 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form> 
<label for="mytext"> 文 本 </1label> 
<input type="text" name="mytext" id="mytext" /> 
<label for="mydate"> 日 期 </label> 
<input type="date" name="mydate" id="mydate" /> 
<label for="mytime"> 时 间 </label> 
<input type="time" name="mytime" id="mytime" /> 
<label for="myemail"> 电 子 邮 件 </label> 
<input type="email" name="myemail" id="myemail" /> 
<label for="mycolor"> 颜 色 </label> 
<input type="color" name="mycolor" id="mycolor" /> 
</form> 
</div> 
</div> 
</body> 
</html> 


代码 7.8 中 ，4 种 不 同 字段 的 编写 方法 与 本 书 第 2 章 中 介绍 的 HIML 5 各 种 <input> 字 段 的 
编写 方法 是 一 致 的 。 在 本 书 第 2 章 中 ， 我 们 已 经 知道 ，HIML 5 的 很 多 字段 类 型 在 不 同 的 操作 
系统 和 不 同 的 浏览 器 中 表现 为 不 同 的 形式 。 这 些 字段 类 型 的 表现 形式 在 jQuery Mobile 网 页 中 
仍然 会 因为 操作 系统 和 浏览 器 的 种 类 而 产生 较 大 的 差异 。 图 7.15 是 相同 的 代码 和 聚焦 字段 在 
Android 系统 的 Opera 浏览 器 和 Chrome 浏览 器 中 的 表现 方式 。 


Wed, Oct 1, 2014 


7.15 date 字段 分 别 在 Opera 和 Chrome 移 动 浏览 器 中 的 不 同 表现 方法 


被 编 为 一 组 的 单 选 按 钮 在 默认 情况 下 仍然 如 图 7.11 中 所 示 那 样 以 垂直 方式 排列 。 如 果 在 
<fieldset> 中 设置 data-type“horizontal”, 那么 单 选 按钮 组 合 将 以 水 平方 式 排列 , 如 图 7.12 所 示 。 
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2. 样式 的 特点 与 定制 


用 于 直接 文本 输入 的 输入 框 通常 具有 迷你 、 失 效 ， 以 及 标题 隐藏 等 定制 样式 。 这 些 简单 的 
样式 定制 和 按钮 中 的 相关 定制 方法 所 使 用 的 HTML 标签 属性 与 原始 的 HTML 标签 属性 的 含义 
是 一 样 的 。 这 里 不 再 歼 述 。 

文本 类 型 的 输入 框 通常 是 网 页 表单 的 一 部 分 。jQuery Mobile 的 表单 中 带 有 标题 的 UU 组 件 
都 可 通过 CSS 的 ui-field-contain 类 ， 使 输入 字段 的 标题 和 输入 框 在 同一 行 中 显示 。CSS 中 的 
ui-field-contain 类 应 该 被 分 别 单独 地 赋予 每 一 个 输入 字段 所 在 的 容器 ， 比 如 代码 7.8 中 的 : 

<label for="mytext"> 文 本 </label> 

<input type="text" name="mytext" id="mytext" /> 

将 被 奉 换 为 : 


<div class="ui-field-contain"> 

<label for="mytext"> 文 本 </label> 

<input type="text" name="mytext" id="mytext" /> 
</div> 


当代 码 7.14 中 的 全 部 4 个 字段 输入 框 代码 都 被 蔡 换 后 , 这 4 个 字段 的 显示 方式 将 由 图 7.16 
中 的 左 图 变 成 图 7.16 中 的 右 图 中 的 形式 。 


+ jam webhop me/chO7/jqm_ Input_besic tml c 0 十 jam webhop me/ch07/jam_input_hetdcontain html (eo| 0 
文本 输入 文本 输入 
文本 
文本 
日 其 日 期 
时 间 
时 间 
电子 各 件 
电子 闻 件 
天 全 


7.16 ”应 用 ui-field-contain 之 前 的 字段 输入 框 ( 左 ) 与 应 用 之 后 ( 右 ) 的 显示 效果 对 比 
CSS 类 ui-field-contain 能 够 使 有 具有 标题 (title) 的 文本 类 型 输入 字段 的 标题 和 输入 框 在 同一 行 
中 的 显示 。 新 的 显示 方式 在 优化 网 页 格局 的 同时 ， 不 可 避免 地 受到 屏幕 宽度 的 制约 ， 当 屏幕 的 
有 效 宽度 无 法 满足 输入 框 的 最 低 要 求 时 ， 标 题 和 输入 框 仍然 会 分 行 显示 。 
国 说 明 : ”jQuery Mobile 1.4.x 目前 仍然 支持 data-role=“fieldcontain"。 这 个 属性 将 从 jQuery 
Mobile 1.5 中 删除 .读者 应 该 只 使 用 CSS 类 ui-field-contain 实现 字段 容器 的 目的 。 


3. 清除 按钮 


<input type=“reset"> 用 于 在 网 页 的 表单 中 产生 一 个 “ 重 置 ”按钮 。 按 下 “ 重 置 ”按钮 ， 整 
个 表单 将 被 重 置 清 零 。 如 果 想 要 清除 表单 中 的 某 一 个 字段 ， 就 不 得 不 先 把 光标 聚焦 到 某 一 个 特 
定 的 字段 ， 再 通过 键盘 上 的 退 格 键 删除 已 经 输入 的 文字 。 jQuery Mobile 为 我 们 提供 了 一 个 十 分 
便利 的 方法 ， 为 文本 型 输入 字段 增加 一 个 清除 按钮 ， 只 要 按 一 下 这 个 清除 按钮 ， 当 前 的 文本 行 
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输入 字段 将 被 清 零 。 


代码 7.9 模拟 了 一 个 登录 页 面 中 的 两 个 基本 字段 : 用 户 名 和 密码 。 
代码 7.9 通过 data-clear-btn 属 性 为 文本 型 输入 框 加 入 清除 按钮 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - textinput</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 


<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 


<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 文 本 输入 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form> 
<label for="username"> 用 户 名 </label> 
<input type="text" name="username" id="username" 
placeholder=" 请 输入 用 户 名 " data-clear-btn="true"/> 
<label for="password"> 密 码 </label> 
<input type="password" name="password" id="password" 
placeholder=" 请 输入 密码 "data-clear-btn="true"/> 


</form> 
</div> 
</div> 
a [cooge ] 
</html> 文本 输入 
每 一 个 字段 在 定义 的 同时 被 添加 了 属性 data-clear-btn= A 
“true”。 正 是 这 个 属性 , 使 jQuery Mobile 自动 为 输入 框 加 入 En 
了 清除 按钮 。 从 图 7.17 可 以 清楚 地 看 到 ， 清 除 按钮 并 不 是 注入 记 码 
-个 独立 的 按钮 ， 而 是 嵌 在 输入 框 内 部 ,附加 在 输入 框 上 的 
-个 组 成 部 分 。 并 且 清 除 按钮 并 不 总 是 处 于 可 见 状态 。 只 有 
当 在 输入 框 中 输入 了 信息 以 后 ， 清 除 按钮 才 变 成 可 见 状 态 。 
按 下 清除 按钮 ， 输 入 框 中 的 内 容 被 全 部 删除 , 这 时 清除 按钮 
会 被 立即 自动 隐藏 ， 而 输入 框 本 身 通 过 placeholder 属性 所 
定义 的 提示 文字 ， 将 重新 显示 在 输入 框 中 。 一 SE 
4. 搜索 框 图 7.17 文本 类 型 输入 框 中 
<input type=“search”> 代 表 了 一 个 搜索 框 .-HTML 5 注重 的 清除 按钮 
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标签 和 属性 的 含义 ， 即 使 type=“search” 清 楚 地 表明 输入 框 的 含义 和 用 途 , 但 是 浏览 器 在 表现 搜 
索 框 时 却 并 没有 明确 统一 的 样式 。jQuery Mobile 为 输入 框 统一 配置 了 “搜索 “图 标 ， 使 搜索 框 
的 目的 通过 外 观 定制 一 目 了 然 。 

仔细 观察 代码 7.10， 这 段 代 码 与 普通 HTML 5 网 页 没有 什么 不 同 (效果 见 图 7.18)。 


代码 7.10 ”使 用 搜索 框 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - textinput</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 


<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 文 本 输入 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form> 
<label for="mySearch"> 查 询 </label> 
<input type="search" name="mySearch" id="mySearch" 
placeholder=" 查 询 条 件 ..." data-clear-btn="true" /> 
</form> 
</div> 
</div> 
</body> 
</html> 


jamwebnopme/cHon 六 芽 5055: 


文本 输入 


查询 


和 已 男 


jamwebhopme/cH07 克 荐 co00e 】 


文本 输入 
i 
JQuery Moble 
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图 7.18 ”搜索 框 的 默认 状态 ( 左 ) 和 文字 输入 状态 ( 右 ) 
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从 网 页 本 身 的 内 容 来 说 , 确实 如 此 。 这 段 代码 能 够 达到 图 7.18 中 的 显示 效果 ,完全 是 因为 
jQuery Mobile 对 type=“search” 进 行 了 样式 增强 , 其 中 包括 为 搜索 框 增加 了 搜索 图 标 。 搜索 图 标 
用 于 表明 搜索 框 的 性 质 ， 不 论 搜索 框 中 是 否 已 经 输入 了 文字 ， 搜 索 图 标 总 是 显示 在 搜索 框 中 ， 
这 一 点 与 清除 按钮 的 默认 行为 特点 不 同 。 


7.3 ”表格 与 网 格 


表格 与 网 格 在 常见 的 表现 形式 上 都 是 二 维 表 。 在 HTML 网 页 中 ， 本 身 没有 网 格 这 样 的 概 
念 ， 但 是 jQuery Mobile 为 网 页 局 部 区 域 的 布局 设计 了 这 样 的 功能 。 表 格 和 网 格 表现 形式 十 分 
类 似 ， 其 中 很 多 个 性 化 的 差异 读者 需要 在 开发 实践 中 逐步 理解 。 另 外 ， 在 HTML 5 中 ,表格 这 
个 概念 一 般 是 指数 据 表格 ， 而 不 是 传统 网 页 开发 中 常 被 用 于 网 页 布局 的 表格 。 我 们 将 会 看 到 ， 
jQuery Mobile 为 表格 做 了 相当 多 的 优化 。 这 些 优化 的 主要 立足 点 , 在 于 解决 移动 设备 屏幕 宽度 
与 表格 实际 所 需 显示 宽度 的 矛盾 。 


7.3.1 Reflow 表格 


单纯 从 字面 上 ， 很 难 找到 一 个 恰当 的 词 来 解释 Reflow 在 这 里 的 含义 。 一 些 人 把 Reflow 
Table 翻译 成 回流 表 ， 或 者 骨 溃 表 列 。 这 些 翻译 的 含义 不 是 十 分 明确 ， 容 易 对 初学 者 造成 困扰 ， 
这 里 就 尽量 回避 生僻 的 翻译 ， 直 接 使 用 英文 术语 原文 。 

1. Reflow 表 格 的 特点 与 自 适应 性 


Reflow 表格 是 一 种 适合 于 罕 小 显示 屏 的 表格 。 这 种 表格 在 显示 方式 上 与 普通 表格 差别 较 
大 ， 或 许 ， 我 们 会 认为 这 样 的 显示 方式 就 算 不 上 一 个 真正 的 表格 。 我 们 可 以 把 传统 的 表格 与 
Reflow 表格 做 一 个 对 比 ， 这 样 就 能 够 直观 地 理解 这 两 种 表格 在 显示 方式 上 的 区 别 了 。 

图 7.19 中 , 显示 了 一 个 普通 的 网 页 数据 表格 。 数 据 表格 通常 以 多 行 多 列 的 方式 显示 , 但 是 
这 样 的 多 列 显示 方式 在 窗 小 的 显示 屏 上 会 引起 过 多 的 屏幕 水 平 滚动 , 而 在 移动 设备 上 的 水 平 滚 
屏 通常 是 需要 避免 发 生 的 ， 因 此 ， 传 统 的 数据 表格 当 列 的 数量 达到 一 定 程度 ， 或 者 表格 内 容 总 
体 所 需 的 显示 宽度 超出 了 显示 屏 实际 宽度 时 , 平常 所 见 的 表格 显示 方式 就 不 再 适合 移动 设备 的 
用 户 界面 设计 要 求 了 。 


7.19 多 列 数据 表格 
Reflow 表格 则 与 之 不 同 , 它 把 横向 的 多 列表 头 以 纵向 堆放 方式 显示 , 并 且 每 一 行 仅 显示 一 
个 表 头 标题 和 一 个 与 之 相对 应 的 值 。 图 7.19 中 的 普通 数据 表格 如 果 转 化 为 Reflow 表格 ， 将 以 
如 图 7.20 所 示 的 方式 显示 。 
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图 7.20 ” Chrome 移动 浏览 器 (显示 屏 4.7 英寸 ) 中 的 Reflow 表 格 

在 网 页 中 创建 一 个 Reflow 表格 非常 容易 ， 只 需要 在 普通 网 页 的 <table> 元 素 中 做 两 点 必要 
的 改变 即 可 : 

@ 添加 属性 data-role=“table”。 

@ 分别 使 用 <thead> 和 <tbody> 元 素 界定 表 头 和 表 体 的 范围 。 

另外 ， 由 于 在 jQuery Mobile 中 ，<table> 元 素 的 默认 data-mode 属性 值 为 “reflow”， 设 置 
data-mode 属性 在 Reflow 表格 编写 过 程 中 不 是 必需 的 。 

图 7.20 演示 了 原始 数据 表格 中 的 一 行 根据 表 头 标题 的 顺序 被 分 为 由 若干 行 组 成 的 一 块 。 

原始 数据 表格 中 的 每 一 行 都 能 对 应 到 Reflow 表格 中 相应 的 数据 块 ， 周 而 复 始 。 这 样 的 显 
示 方 式 对 于 罕 屏 设备 能 够 避免 屏幕 水 平 滚动 ， 但 对 于 像 平板 电脑 中 这 样 的 宽屏 设备 来 说 ， 则 可 
能 显示 为 图 7.21 那样 ,造成 屏幕 利用 率 低下 , 那样 Reflow 表格 看 起 来 就 不 是 一 个 很 好 的 选择 。 
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图 7.21 Chrome 移 动 浏览 器 (显示 屏 10.1 英寸 ) 中 的 Reflow 表 格 
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为 了 很 好 地 协调 Reflow 表格 在 不 同 宽度 设备 上 的 表现 ，jQuery Mobile 提供 了 基本 的 自 适 
应 能 力 ， 即 在 <table> 元 素 中 使 用 CSS 类 ui-responsive， 把 预定 义 的 表格 断 点 (580px) 应 用 到 
Reflow 表格 中 。jQuery Mobile 通过 媒体 查询 的 方式 ， 根 据 浏览 器 的 当前 宽度 以 及 预定 义 或 者 


自 定义 的 断 点 来 决定 采取 多 列 还 是 堆放 的 显示 方式 。 


代码 7. 


11 是 一 个 完整 的 Reflow 表格 。 这 个 表格 包括 了 Reflow 表格 必须 具备 的 data-role= 
“table” 属 性 ， 通 过 <thead> 和 <tbody> 元 素 界定 表 头 和 表 体 ， 并 且 由 class=“ti-responsive” 使 表格 


具有 一 定 的 自 适应 能 
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代码 7. 


11 具有 自 适应 能 力 的 Reflow 表 格 


<!DOCTYPE html> 


<html> 
<head> 


<title>jQuery Mobile - Reflow 表格 </title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 


rel="stylesheet" /> 


<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


</head> 


<body> 


<div data-role="page"> 


<div data-role="header"> 
<h1>Reflow 表格 </h1> 
</div> 
<div class="ui-content" role="main"> 
<table data-role="table" class="ui-responsive"> 
<thead> 
tr 
<th> 年 </th><th> 届 </th><th> 城 市 </th> 
<th> 主 办 国家 </th><th> 金 牌 榜 一 </th> 
<th> 金 牌 榜 二 </th><th> 金 牌 榜 三 </th> 
<th> 金 牌 榜 四 </th><th> 金 牌 榜 五 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>2012</td><td>30</td><td> 伦 敦 </td> 
<td> 英 国 </td><td> 美 国 </td><td> 中 国 </td> 
<td> 英 国 </td><td> 俄 罗斯 </td><td> 韩 国 </td> 
</tr> 
<tr> 
<td>2008</td><td>29</td><td> 北 京 </td> 
<td> 中 国 </td><td> 中 国 </td><td> 美 国 </td> 
<td> 俄 罗斯 </td><td> 英 国 </td><td> 德 国 </td> 
EE 
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<td>2004</td><td>28</td><td> 雅 典 </td> 
<td> 希 腊 </td><td> 美 国 </td><td> 中 国 </td> 
<td> 俄 罗斯 </td><td> 澳 大 利 亚 </td><td> 日 本 </td> 

</tr> 

<tr> 
<td>2000</td><td>27</td><td> 悉 尼 </td> 
<td> 澳 大 利 亚 </td><td> 美 国 </td><td> 俄 罗斯 </td> 
<td> 中 国 </td><td> 澳 大 利 亚 </td><td> 德 国 </td> 

</tr> 

<tr> 
<td>1996</td><td>26</td><td> 亚 特 兰 大 </td> 
<td> 美 国 </td><td> 美 国 </td><td> 俄 罗斯 </td> 
<td> 德 国 </td><td> 中 国 </td><td> 法 国 </td> 

</tr> 

<tr> 
<td>1992</td><td>25</td><td> 巴 塞 罗 那 </td> 
<tq> 西 班 牙 </td><td> 独 联 体 </td><td> 美 国 </td> 
<td> 德 国 </td><td> 中 国 </td><td> 古 巴 </td> 

</tr> 

</tbody> 
</table> 
</div> 
</div> 
</body> 
</html> 


运行 结果 如 图 7.22 所 示 。 


[| 
图 7.22 Chrome 移动 浏览 器 (显示 屏 10.1 英寸 ) 中 具有 自 适 应 能 力 的 Reflow 表 格 
2. 表 头 分 组 


Reflow 表格 在 外 观 上 的 定制 有 别 于 单纯 的 显示 样式 定制 ， 其 中 一 个 特色 是 对 表 头 的 分 组 。 
在 实际 应 用 中 ， 表 头 分 组 是 一 种 十 分 常见 ， 而 且 非 常 实用 的 表格 表现 方式 。 
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代码 7.12 是 在 代码 7.11 的 基础 上 对 表 头 部 分 进行 分 组 。 从 两 段 代码 的 对 比 可 以 看 出 ， 主 


要 的 区 别 在 于 表 头 组 合 需 要 通过 <tr> 元 素 单独 在 表 头 中 建立 新 的 一 行 ， 并 且 通 过 colspan 属性 
指定 一 个 组 合 列 会 跨越 的 实际 表 列 的 数目 。colspan 是 标准 的 HTML 属性 , 在 jQuery Mobile 中 


沿 / 


了 HTML 中 的 原 有 含义 。 按 照 表格 在 jQuery Mobile 中 的 编写 惯例 , 表 头 部 分 必须 由 <thead> 


指定 范围 ， 而 且 表 头 中 的 一 个 单元 必须 是 由 <th> 元 素 定义 ， 而 不 能 使 用 <td> 元 素 。 经 过 修改 的 
表格 必须 保持 表 头 中 总 的 表 列 数目 与 标题 中 的 列 的 数目 一 致 。 


268 < 


代码 7.12 ”Reflow 表 格 表 头 分 组 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - Reflow 表格 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<hl>Reflow 表格 </h1> 
</div> 
<div class="ui-content" role="main"> 
<table data-role="table" class="ui-responsive"> 
<thead> 
<tr> 
<th colspan="2"> 奥 运 会 </th> 
<th colspan="2"> 主 办 地 点 </th> 
<th colspan="5"> 金 牌 榜 </th> 
</tr> 
<tr> 
<th> 年 </th><th> 届 </th> 
<th> 城 市 </th><th> 国 家 </th> 
<th> 第 一 </th><th> 第 二 </th><th> 第 三 </th> 
<th> 第 四 </th><th> 第 五 </th> 
</tr> 
</thead> 
<tbody> 
EE 
<td>2012</td><td>30</td><td> 伦 敦 </td> 
<td> 英 国 </td><td> 美 国 </td><td> 中 国 </td> 
<td> 英 国 </td><td> 俄 罗斯 </td><td> 韩 国 </td> 
ET 
<tr> 
<td>2008</td><td>29</td><td> 北 京 </td> 
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<td> 中 国 </td><td> 中 国 </td><td> 美 国 </td> 
<td> 俄 罗斯 </td><td> 英 国 </td><td> 德 国 </td> 

</tr> 

<tr> 
<td>2004</td><td>28</td><td> 雅 典 </td> 
<td> 希 腊 </td><td> 美 国 </td><td> 中 国 </td> 
<td> 俄 罗斯 </td><td> 澳 大 利 亚 </td><td> 日 本 </td> 

</tr> 

<tr> 
<td>2000</td><td>27</td><td> 悉 尼 </td> 
<td> 澳 大 利 亚 </td><td> 美 国 </td><td> 俄 罗斯 </td> 
<td> 中 国 </td><td> 澳 大 利 亚 </td><td> 德 国 </td> 

</tr> 

有 
<td>1996</td><td>26</td><td> 亚 特 兰 大 </td> 
<td> 美 国 </td><td> 美 国 </td><td> 俄 罗斯 </td> 
<td> 德 国 </td><td> 中 国 </td><td> 法 国 </td> 

</tr> 

<tr> 
<td>1992</td><td>25</td><td> 巴 塞 罗 那 </td> 
<td> 西 班 牙 </td><td> 独 联 体 </td><td> 美 国 </td> 
<td> 德 国 </td><td> 中 国 </td><td> 古 巴 </td> 

</tr> 

</tbody> 
</table> 
</div> 
</div> 
</body> 
</html> 


修改 以 后 的 Reflow 表格 在 宽屏 和 窦 屏 设备 上 的 显示 效果 如 图 7.23 所 示 。 


年 
| sm 局 
vn 
n a a ee 
| 城市 此 京 
Ri + 国家 中 国 
站 m em 
MM 站。 二天。 让 本 第 一 国 
= 美国 
壬 三 八 罗 斯 
第 四 英国 
第 五 | 


图 7.23 表 头 组 合 分 别 在 10.1 英寸 和 4.7 英寸 显示 屏 上 的 实际 效果 
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7.3.2 可 选 表 列 的 表格 


可 选 表 列 (Column Toggle) 的 表格 提供 了 另外 一 种 适用 了 窦 屏 设备 的 表格 显示 方案 。 从 名 称 
上 就 很 直观 地 反映 出 这 种 表格 中 的 表 列 可 能 并 不 同时 显示 出 来 , 而 是 提供 了 由 用 户 来 决定 哪些 
表 列 需要 显示 的 能 

1. 表 列 优先 级 与 自 适应 性 


可 选 表 列 的 表格 在 网 页 外 观 上 一 个 显著 的 特点 就 是 这 种 表格 带 有 如 图 7.24 中 所 示 的 表 列 
选择 按钮 。 按 下 表 列 选择 按钮 ， 屏 幕 将 出 现 一 个 表 列 选择 菜单 。 用 户 可 以 根据 移动 设备 的 屏幕 
宽度 和 实际 业务 需求 ， 在 表 列 中 做 出 选择 。 用 户 的 选择 会 立即 反映 在 表格 中 。 


[emse | CT 
可 选 表 列 的 表格 可 选 表 列 的 表格 
| 醒目 
Columns... 城市 
= 年 城市 
年 城市 金牌 榜 主办 国家 
2012 从 美国 2012 伦敦 
思 金牌 榜 一 
2008 北京 中 国 2008 北京 
2004 。 雅典 美国 2004 。 雅典 金牌 横 二 
2000 ”悉尼 美国 2000 。 悉尼 金牌 榜 三 
1996 。 亚特兰大 ”美国 1996 。 亚特兰大 会 牌 榜 四 
1992 巴塞罗那。 独 联 体 1992 。 巴塞 罗 那 
金牌 榜 五 


CE 
图 7.24 表 列 选择 按钮 和 选择 菜单 
代码 7.13 是 图 7.24 的 原始 网 页 文件 。 分 析 这 段 代码 ， 尤 其 是 把 重点 放 在 表格 的 定义 方法 、 
表 头 中 优先 级 的 设置 方法 等 ， 能 够 帮助 我 们 轻松 地 发 现 表 列 的 定制 方法 。 
代码 7.13 ”可 选 表 列 的 表格 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - Column Toggle 表格 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 


<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
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<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 可 选 表 列 的 表格 </h1> 
</div> 
<div class="ui-content" role="main"> 
<table data-role="table" data-mode="columntoggle" 
id="olympic" class="ui-responsive"> 
<thead> 
<tr> 
<th> 年 </th> 
<th data-priority=" 
<th data-priority=" 
<th data-priority=" 
<th data-priority=" 
<th data-priority=" 
<th data-priority="2"> 人 金牌 榜 三 </th> 
<th data-priority="3"> 金 牌 榜 四 </th> 
<th data-priority="3"> 金 牌 榜 五 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 


<td> 英 国 </td><td> 俄 罗斯 </td><td> 韩 国 </td> 
</tr> 
Er 
<td>2008</td><td>29</td><td> 北 京 </td> 
<td> 中 国 </td><td> 中 国 </td><td> 美 国 </td> 
<td> 俄 罗斯 </td><td> 英 国 </td><td> 德 国 </td> 
</tr> 
i 
<td>2004</td><td>28</td><td> 雅 典 </td> 
<td> 希 腊 </td><td> 美 国 </td><td> 中 国 </td> 
<td> 俄 罗斯 </td><td> 澳 大 利 亚 </td><td> 日 本 </td> 
</tr> 
<tr> 
<td>2000</td><td>27</td><td> 悉 尼 </td> 
<td> 澳 大 利 亚 </td><td> 美 国 </td><td> 俄 罗斯 </td> 
<td> 中 国 </td><td> 澳 大 利 亚 </td><td> 德 国 </td> 
</tr> 
ES 
<td>1996</td><td>26</td><td> 亚 特 兰 大 </td> 
<td> 美 国 </td><td> 美 国 </td><td> 俄 罗斯 </td> 
<td> 德 国 </td><td> 中 国 </td><td> 法 国 </td> 
</tr> 
EE 
<td>1992</td><td>25</td><td> 巴 塞 罗 那 </td> 
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<td> 西 班 牙 </td><td> 独 联 体 </td><td> 美 国 </td> 
<td> 德 国 </td><td> 中 国 </td><td> 古 巴 </td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> 
</body> 
</html> 
与 Reflow 表格 相 比 ， 可 选 表 列 的 表格 在 代码 编写 方面 有 以 下 几 个 特点 : 
@ <table> 元 素 中 的 data-role 属性 值 必须 是 "table"， 并 且 ， 必 须 指 定 data-mode 属性 的 值 
为 “columntoggle”。 
@ 必须 为 <table> 元 素 指定 一 个 id 值 。 
表格 的 表 头 部 分 定义 在 <thead> 元 素 中 , 并 且 表 头 单元 格 必须 通过 <th> 元 素 定义 ， 不 可 
以 使 用 <td> 元 素 。 这 一 点 与 Reflow 表格 的 编程 方法 相同 。 
e@ 在 定义 表 头 单元 格 的 <th> 元 素 中 ， 可 以 通过 data-priority 属性 定义 优先 级 。jQuery 
Mobile 支持 6 个 不 同 的 优先 级 ， 分 别 由 数字 “1” 到 “6” 来 代表 ， 数 字 “1” 代 表 最 高 优先 
级 ， 数 字 “6" 代 表 最 低 优先 级 。 凡 是 具有 优先 级 定义 的 表 列 将 出 现在 表 列 选择 菜单 中 。 
如 果 表 格 中 某 一 列 的 表 头 没有 定义 data-priority 属性 ， 相 应 的 表 列 将 出 现在 表格 中 ， 
不 会 被 隐藏 ， 而 且 表 列 选择 菜单 也 不 会 含有 相应 的 表 列 供用 户 选择 。 
@ ” 表 列 选择 按钮 和 表 列 选择 菜单 是 由 系统 自动 创建 的 ， 不 需要 在 网 页 代码 中 定义 。 
如 果 仅 仅 按 照 以 上 描述 的 代码 编写 规则 , 我们 可 能 会 得 到 一 个 如 图 7.25 所 示 的 只 包含 一 列 
的 表格 。 


] 可 选 末 列 的 表格 
€ 3 CC Dimwebhop.me 


可 选 表 列 的 表格 


7.25 ”在 不 具有 自 适应 能 力 的 可 选 表 列表 格 中 ， 被 赋予 优先 级 的 表 列 被 自动 隐藏 


当 表 头 单元 格 <th> 中 缺 省 data-priority 属性 时 ， 该 表 列 将 必定 显示 在 表格 中 ， 比 如 ，<th> 
年 </th> 就 明确 定义 了 “年 ”这 一 列 始终 显示 在 表格 中 ， 而 其 他 列 则 分 别 被 赋予 了 data-priority 
属性 ， 将 出 现在 表 列 选择 菜单 中 ， 在 用 户 选择 该 列 之 前 不 会 自动 显示 。 显 然 ， 这 样 的 显示 逻辑 
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非常 策 拙 。 当 在 <table> 元 素 加 入 CSS 类 “ui-responsive”， 使 表格 具备 了 一 定 的 自 适应 能 力 以 后 ， 
用 户 界 面 就 会 大 为 改观 。 
应 注意 代码 7.13 中 表 头 单元 格 优先 级 的 定义 。 代 码 中 除了 “年 ”这 一 列 始终 显示 以 外 ,其 
他 的 各 列 中 一 共 使 用 了 3 个 优先 级 。 其 中 “城市 "和 “金牌 榜 一 ”两 列 被 赋予 了 最 高 优先 级 “1”， 
“ 届 ” 和 “金牌 榜 二 ”、“ 金 牌 榜 三 ”三 列 被 赋予 了 优先 级 “2”，“ 主 办 国家 ”和 “金牌 榜 四 ”、 
“金牌 榜 五 ” 三 列 被 赋予 了 较 低 的 优先 级 “3”。 把 这 段 代码 显示 在 Chrome 桌面 浏览 器 中 ， 从 宽 
屏 到 窄 屏 逐步 缩小 浏览 器 窗口 ,就 能 依次 得 到 图 7.26 中 的 三 个 页 面 ,从 这 个 实验 过 程 可 以 看 到 ， 
jQuery Mobile 中 具备 自 适 应 能 力 的 可 选 表 列 的 表格 能 够 随时 按照 浏览 器 窗口 的 宽度 , 自动 根据 
表 头 中 的 表 列 优先 级 ， 达 到 自动 显示 /隐藏 各 表 列 的 目的 。 
门 可 选 者 列 的 表格 3 
€ © BD jam.webhop.me/CHO7/jqm_table_column_toggle.html#8ui-state=ct | DTD 三 
可 选 表 列 的 表格 ea 
城市 
全 牌 村 一 ”全 牌 榜 二 ”全 牌 榜 三 “全 牌 思 主办 国家 
英国 英国 。 俄 罗 和 加 全 牌 栈 一 
中 国 3 HR 斯。 英国 | 局 全 取材 二 
蕉 典 希腊 俄罗斯 。 澳 大 三 
7 笑 尼 。。 澳大利亚 二 该 灶 时 
亚特兰大 美国 德国 中国] 加 人 种 本 四 
巴塞 罗 肝 ”西班牙 穗 国 中 国 】 回 金牌 栈 五 


门 可 壬 表 列 的 表格 x 
3 © |D jm.webhop.meCHO7/am_tabe_coumn _ 安 8 所 半 CDlmwebhop 安 更 避 三 


届 | las | 
城市 Se 城市 rd 


主办 国 表 全 外 本 三 年 。 遇 二 主办 国家 


思 全 牌 槛 一 英国 在 加 全 牌 榜 一 


加 全 牌 榜 二 俄罗斯 E 全 牌 榜 二 
俄罗斯 | 
金牌 榜 三 | 金牌 顶 三 


德国 金牌 榜 四 
德国 金牌 榜 五 


7.26 随 着 浏览 器 窗口 大 小 的 改变 ， 表 格 中 的 可 选 列 以 及 表 列 选择 菜单 都 跟着 自动 发 生 了 变化 


2. 定制 表 列 选择 按钮 


读者 稍 加 留意 ， 就 会 发 现 表 列 选择 按钮 上 的 文字 是 “Columns...”。 固 定 的 英文 按钮 文字 
会 给 使 用 中 文 的 用 户 带 来 不 便 ， 并 且 也 不 利于 网 站 的 国际 化 与 本 地 化 ， 为 此 ,我 们 需要 改变 按 
钮 上 的 命令 文字 。 
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定制 表 列 选择 按钮 只 需要 对 <table> 元 素 稍 加 修改 即 可 。 下 面 的 表格 定义 是 在 代码 7.13 的 
<table> 元 素 中 加 入 了 两 个 属性 : 
<table data-role="table" data-mode="columntoggle"” id="olympic" 


data-column-btn-text=" 选 择 表 列 . . ." data-column-btn-theme="b" 


class="ui-responsive" > 
ee 
其 中 的 data-column-btn-text 属性 用 于 定义 表 列 按钮 上 的 文字 ， 而 data-column-btn-theme 属 
性 用 于 定义 表 列 选择 按钮 的 样式 主题 ， 属 性 值 可 以 是 任何 一 个 有 效 的 主题 样本 (swatch)。 这 两 
个 属性 使 表 列 选择 按钮 上 的 命令 文字 更 改 为 “选择 表 列 ...”， 并 且 使 列表 选择 按钮 的 样式 风格 
选用 主题 样本 “b”。 在 jQuery Mobile 默认 的 主题 样式 中 ， 主 题 样本 “b” 代 表 了 深 色 主题 。 
骨 | 说 明 : ”jQuery Mobile 1.4.x 目前 仍然 支持 CSS 类 。table-stroke 和 table-stripe 用 于 设置 


Reflow 表格 和 表 列 可 选 表格 的 背景 样式 。 这 两 个 CSS 类 将 从 jQuery Mobile 1.5 
中 删除 ， 本 书 将 不 做 介绍 。 


7.3.3 网 格 


网 格 (grid) 在 内 容 布局 方面 具有 许多 与 表格 (table) 相 近 的 
特性 。 一 个 网 格 可 能 只 有 一 行 ， 或 者 拥有 多 行 ， 都 可 以 看 作 jqm webhop.me/CH07/ 妈 轩 socee  ] 
是 一 个 由 行 和 列 组 成 的 二 维 结构 。 在 jQuery Mobile 中 , 网 格 网 格 
在 网 页 显示 上 又 有 其 特殊 性 。 在 这 里 ， 一 个 基本 的 网 格 是 一 
个 占据 100% 屏 幕 宽 度 ， 不 拥有 边框 ， 并 且 边 距 (margin 和 
padding) 为 零 的 UI 组 件 。 图 7.27 中 就 是 这 样 一 个 拥有 一 行 两 
列 的 网 格 。 由 于 网 格 在 窗 屏 设备 上 的 自 适应 能 力 和 灵活 性 有 
限 ， 在 移动 网 站 的 设计 阶段 应 该 对 采用 网 格 与 否 采取 比较 说 
慎 的 态度 。 
1. 网 格 的 基本 构成 


在 jQuery Mobile 网 页 中 定义 一 个 网 格 , 只 需要 使 用 CSS 
类 声明 网 格 中 列 的 数目 ， 然 后 声明 网 格 中 的 成 员 即 可 。 二 Om- 
声明 网 格 中 列 的 数目 通过 CSS 类 名 前 级 “ui-grid-” 实 现 。 
jQuery Mobile 支持 一 个 网 格 最 多 拥有 5 列 。 当 一 个 网 格 只 拥 。 图 7.27 一 个 基本 的 两 列 网 格 
有 一 列 时 ， 这 个 唯一 的 单元 格 被 称 为 solo( 独 唱 、 独 奏 之 意 )。 
这 时 的 网 格 需 要 用 CSS 类 “ui-grid-solo” 来 修饰 。 当 一 个 网 格 拥 有 2 列 到 5 列 时 ， 分 别 用 字母 
a~d 来 代表 ， 附 加 到 CSS 类 名 前 级 “ui-grid-” 的 后 面 。 因 此 ， 网 格 中 列 的 计数 方法 比较 特殊 ， 
字母 a 表示 两 列 结构 ， 而 不 是 一 列 ， 这 一 点 需要 特别 留意 。 
网 格 中 的 每 一 个 单元 格 通过 CSS 类 名 前 级 “ui-block-” 表 示 所 处 的 位 置 。 处 于 一 行 中 第 一 
个 位 置 的 单元 格 使 用 位 置 序号 a， 第 二 个 单元 格 使 用 位 置 序号 b， 以 此 类 推 。 由 于 网 格 的 一 行 
最 多 只 能 够 容纳 5 个 单元 格 ， 单 元 格 的 序号 只 能 是 从 a 到 e。 


第 一 列 第 二 列 
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代码 7.14 演示 了 用 于 产生 图 7.27 中 两 列 网 格 的 网 页 的 编写 方法 。 
在 这 段 代 码 中 ，<div class="“ui-grid-a”*> 声 明了 一 个 拥有 两 列 结 构 的 网 格 ，<div 
class“ui-block-a”> 和 <div class=“ui-block-b”> 分 别 声 明了 网 格 一 行 中 的 两 个 单元 格 。 


代码 7.14 ”两 列 结构 的 网 格 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 网 格 (grid) </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"> 
</script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 网 格 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div class="ui-grid-a"> 
<div class="ui-block-a"> 第 一 列 </div> 
<div class="ui-block-b"> 第 二 列 </div> 
</div> 
</div> 
</div> 
</body> 
</html> 


2. 网 格 的 布局 特点 


网 格 单元 格 的 布局 遵循 宽度 等 分 的 原则 。 图 7.28 演示 了 5 个 彼此 独立 的 网 格 , 分 别 拥有 1 
列 到 5 列 。 每 一 个 单元 格 都 在 所 处 的 行 中 与 其 他 单元 格 平分 浏览 器 的 有 效 宽度 。 


图 7.28 网 格 的 基本 布局 
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图 7.27 和 7.28 演示 的 是 单行 多 列 的 网 格 。 当 一 个 网 格 包含 多 行 时 ， 网 格 并 没有 像 <table> 
表格 那样 的 <tr> 元 素 用 于 定义 网 格 中 的 一 行 , 而 是 通过 用 于 声明 单元 格 位 置 的 CSS 类 在 网 格 代 
码 中 的 重复 使 单元 格 分 行 显示 。 

代码 7.15 演示 了 一 个 包含 3 行 4 列 的 网 格 。 在 这 个 网 格 中 , 通过 对 第 一 行 单元 格 的 不 断 重 
复 ， 达 到 多 行 显示 的 目的 。 


代码 7.15 ”多 行 网 格 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - 网 格 (grid) </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 


<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 网 格 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div class="ui-grid-c"> 
<div class="ui-block-a"> 第 一 列 </div> 
<div class="ui-block-b"> 第 二 列 </div> 
<div class="ui-block-c"> 第 三 列 </div> 
<div class="ui-block-d"> 第 四 列 </div> 
<div class="ui-block-a"> 第 一 列 </div> 
<div class="ui-block-b"> 第 二 列 </div> 
<div class="ui-block-c"> 第 三 列 </div> 
<div class="ui-block-d"> 第 四 列 </div> 
<div class="ui-block-a"> 第 一 列 </div> 
<div class="ui-block-b"> 第 二 列 </div> 
<div class="ui-block-c"> 第 三 列 </div> 
<div class="ui-block-d"> 第 四 列 </div> 


</div> 
</div> 
</div> 
</body> 
</html> 
显示 效果 如 图 7.29 所 示 。 
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第 四 列 
第 四 列 
第 四 列 


图 7.29 多 行 网 格 


3. 单元 格 内 容 与 样式 定制 


图 7.29 中 的 网 格 体现 了 一 个 最 基本 的 网 格 结构 。 一 个 基本 的 网 格 结构 按照 网 格 的 行列 布 
局 ， 把 单元 格 中 的 内 容 按照 默认 方式 显示 出 来 。 由 于 网 格 本 身 不 会 对 单元 格 的 背景 、 边 框 等 赋 
予 特殊 的 样式 ,我们 所 看 到 就 只 会 是 白 底 黑 字 ， 文 字 左 对 齐 等 默认 的 常规 样式 。 我 们 也 可 以 把 
单元 格 中 的 内 容 包含 到 另 一 层 容器 中 ， 这 样 ， 就 很 容易 地 为 新 增加 的 容器 赋予 样式 ， 从 而 实现 
对 单元 格 的 样式 定制 。 代 码 7.16 就 是 采用 这 种 方案 的 一 个 简单 演示 。 


代码 7.16 ”网 格 单元 格 样式 定制 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - 网 格 (grid) </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<style> 
div[class^="ui-block-"] > div { 
height: AO0px; 
background-color: #ccffffE; 
border-style: dotted; 
border-width: 1px; 
text-align: center; 
} 
</style> 
</head> 
<body> 


<div data-role="page"> 
<div data-role="header"> 
<h1> 网 格 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div class="ui-grid-b"> 
<div class="ui-block-a"> 
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<div> 第 一 列 </div> 

</div> 

<div class="ui-block-b"> 
<div> 第 二 列 </div> 

</div> 

<div class="ui-block-c"> 
<div> 第 三 列 </div> 

</div> 

<div class="ui-block-a"> 
<div> 第 一 列 </div> 

</div> 

<div class="ui-block-b"> 
<div> 第 二 列 </div> 

</div> 

<div class="ui-block-c"> 
<div> 第 三 列 </div> 

</div> 

<div class="ui-block-a"> 
<div> 第 一 列 </div> 

</div> 

<div class="ui-block-b"> 
<div> 第 二 列 </div> 

</div> 

<div class="ui-block-c"> 
<div> 第 三 列 </div> 

</div> 

</div> 
</div> 
</div> 
</body> 
</html> 


在 代码 7.16 中 , 每 一 个 单元 格 的 内 容 都 被 加 入 到 一 个 <div> 元 素 中 ， 这 个 <div> 元 素 形 成 了 
单元 格 内 容 的 新 的 容器 。 通 过 CSS 选择 器 div[class^=“ui-block-”] > div， 把 样式 赋予 所 有 单元 
格 的 直接 子 元 素 <div>， 达 到 重新 定义 单元 格 中 的 背景 颜色 、 单 元 格 高 度 、 文 字 对 齐 方式 ， 以 
及 边框 样式 的 目的 。 显 示 效 果 如 图 7.30 所 示 。 


7.30 ”单元 格 样式 定制 以 后 的 网 格 
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网 格 的 单元 格 中 除了 文字 以 外 ， 还 可 以 放置 普通 按钮 、 单 选 /多 选 按钮 、 下 拉 菜 单 等 多 种 
UI 组 件 。 网 格 为 这 些 UI 组 件 在 屏幕 上 的 局 部 范围 内 的 布局 提供 了 一 定 的 便利 条 件 。 

以 按钮 为 例 ,代码 7.17 演示 了 如 何在 一 个 单行 网 格 的 3 个 单元 格 中 分 别 放 置 一 个 带 有 图 标 
的 按钮 。 


代码 7.17 利用 单元 格 定义 按钮 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - 网 格 (grid) </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 


<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 网 格 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div class="ui-grid-b"> 
<div class="ui-block-a"> 
<a href="#" data-role="button" data-icon="home"> 
主页 
</a> 
</div> 
<div class="ui-block-b"> 
<a href= 
联系 
</a> 
</div> 
<div class="ui-block-c"> 


"#" data-role="button" data-icon="phone"> 


<a href="#" data-role="button" data-icon="search"> 
查询 
</a> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


图 7.31 是 这 3 个 按钮 在 4.7 英寸 显示 屏 上 的 实际 显示 效果 。 
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如 果 在 小 屏幕 移动 设备 上 演示 代码 7.17, 有 可 能 出 现 屏 幕 宽 度 不 够 的 问题 , 图 7.32 是 相同 
的 代码 在 4 英寸 移动 设备 模拟 器 上 的 显示 效果 ， 从 图 中 可 以 看 到 ， 由 于 屏幕 宽度 不 够 ， 按 钮 上 
的 命令 文字 不 能 正确 显示 。 

与 表格 一 样 , jQuery Mobile 的 网 格 也 同样 可 以 被 添加 自 适应 的 特性 。 只 需要 在 定义 网 格 的 
同时 , 添加 CSS 类 ui-responsive 即 可 。 具 有 自 适 应 能 力 的 网 格 当 显示 屏 宽度 不 够 时 , 会 以 如 图 
7.33 所 示 的 堆放 的 方式 显示 。 


CCN) 754 
网 格 网 格 网 格 
@ 
Or OW Qu © @ @ O 主页 
© 联系 
© 查询 


| <- oo FEE 和 二 口 可 - 


图 7.31 通过 单元 格 定位 的 按钮 。 图 7.32 单元 格 中 的 内 容 超出 屏 ”图 7.33 具有 自 适应 能 力 的 网 格 
幕 宽度 时 的 显示 问题 自动 采用 的 堆放 显示 方式 


7.4 本 章 习 题 


编程 题 

(1) 编写 一 个 拥有 如 图 7.34 所 示 的 页 头 的 jQuery Mobile 网 页 。 注 意 : @D 按 钮 所 在 位 置 ; 
@@ 按 钮 的 样式 特征 ， 包 括 图 标的 背景 、 边 角 ， 无 文字 等 。 

(提示 : 借用 经 典 样式 的 主题 “b” 以 达到 更 好 的 视觉 效果 ) 


至 按钮 育 


图 7.34 题 (1) 图 


(2) 设计 一 个 表格 。 当 浏览 器 窗口 处 于 不 同 的 宽度 时 ， 表 格 中 将 出 现 不 同 的 列 ， 如 图 7-35 
所 示 。 表 列 选 择 菜单 在 默认 情况 下 处 于 隐藏 状态 ， 只 有 当 用 户 点 击 列表 选择 按钮 后 ， 菜 单 才 会 


届 。 景 佳 故事 片 


1 《巴山 夜 十 》 
改天 云 山 传奇 》 


2 < 邻居 > 


3 世人 到 中 年 》 
<《 驹 驼 祥子 > 


4 < 多 音 > 
《 红 衣 少女 》 


中 国电 影 金鸡 奖 


最 佳 故事 片 


《< 巴山 夜 十 
《天 云 山 传奇 》 


《邻居 》 


所 人 到 中 年 >》 
< 骆驼 祥子 》 


世 乡 音 和 
< 红 衣 少 女 》 


中 国电 影 金 鸡 奖 


泗 晓 月 
读 子 风 


记 晓 丹 
恋 子 风 


董 行 售 . 杨 在 葵 


7-35 题 (2) 图 
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| 


必 
最 佳 帮 事 片 
景 侍女 四 最 佳 演 
| 中 最 人 男 角 
丰 秀 明 | 四 景 佳 妇 主 角 
i 
鞠 雪 B® 
和 
中 国电 影 全 驳 奖 
选择 表 列 ..。 
最 仁 帮 事 上 
《< 世 L 准 而》 
《天 二 山 入 厅 》 
《久居 》 
< 人 到 中 年 》 
《了 驼 洋 了 》 
《9 
TR 
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吊 8 章 
jQuery Mobile 的 UI 组 件 ( 续 ) 


本 章 导读 : 


本 章 将 介绍 jQuery Mobile 中 功能 较为 复杂 的 UI 组件， 这 些 UI 组件 在 通常 的 
网 站 开发 中 需要 通过 非常 复杂 的 JavaScript 和 CSS 编程 ， 才 能 达到 类 似 的 效果 。 

jQuery Mobile 的 UI 组 件 框架 已 经 为 网 站 开发 人 员 准 备 了 相当 丰富 的 UI 组 件 ， 
使 用 这 些 组 件 ， 开发 一 个 不 但 美观 , 而 且 具 有 增强 的 客户 端 互 动能 力 的 移动 网 站 就 
变 得 比较 容易 了 。 

本 章 的 内 容 是 jQuery Mobile 网 站 开发 中 ， 增 加 网 页 动态 效果 、 增 强 用 户 体验 
的 一 个 重要 的 步骤 ， 也 是 jQuery Mobile 吸引 大 量 网 页 开发 人 员 的 一 个 主要 亮点 。 

通过 本 章 学 习 , 读者 将 能 够 直接 使 用 jQuery Mobile 中 的 大 量 UI 组 件 ， 来 完成 
通常 需要 相当 高 超 的 HTML 和 JavaScript 技巧 ， 而 且 十 分 繁琐 的 网 页 开发 任务 。 
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8.1 滑动 条 


滑动 条 , 从 作用 上 来 说 , 是 数字 输入 的 一 个 蔡 代 方案 。 滑动 条 通过 用 户 对 滑 块 拖 动 的 方式 ， 


输入 相应 的 值 。 在 实际 应 用 中 ， 常 见于 音量 或 者 亮度 的 调节 、 温 度 的 控制 等 。jQuery Mobile 
提供 了 两 类 滑动 条 : 基本 滑动 条 和 范围 滑动 条 ， 两 者 在 编程 上 十 分 相似 ， 而 且 定 制 的 方法 ， 以 
及 附加 的 功能 也 十 分 相似 。 


8.1.1 基本 滑动 条 


1. 滑动 条 与 输入 值 
滑动 条 是 输入 数字 值 的 一 个 方法 。 数 字 值 需要 指定 一 个 有 效 的 取 值 范围 ，HTML 5 中 


<input> 元 素 的 range( 范 围 ) 类 型 正 符合 这 样 的 需要 。jQuery Mobile 对 HTML 5 中 <input> 元 素 的 
range 类 型 的 网 页 表现 样式 做 了 非常 大 的 改变 ， 使 它 在 网 页 上 具备 了 滑动 条 的 样式 要 求 。 
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下 面 从 代码 8.1 更 直观 地 观察 一 个 滑动 条 的 构建 方法 和 在 网 页 上 的 作用 。 
代码 8.1 一 个 简单 的 滑动 条 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Slider</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 滑 动 条 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form target="#"> 
<label for="month"> 月 份 </label> 
<input type="range" name="month" id="month" 
value="3" min="1" max="12"> 
</form> 
</div> 
</div> 
</body> 
</html> 
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代码 8.1 体现 了 一 个 最 简单 的 jQuery Mobile 滑动 条 所 必需 的 基本 要 素 。 一 个 滑动 条 由 
HTML 5 中 的 range 类 型 的 <input> 元 素 自动 产生 。 滑动 条 的 有 效 值 范围 由 <input> 元 素 的 min( 最 
小 值 ) 属 性 和 max( 最 大 值 ) 属 性 确定 。 这 两 个 属性 都 是 在 HTML 5 中 新 增加 的 属性 。<input> 元 素 
的 value 属性 ， 代 表 了 滑动 条 的 当前 值 。 由 于 我 们 已 经 在 代码 中 把 value 属性 值 设 为 3， 当 网 页 
在 浏览 器 中 显示 时 ， 滑 块 被 设置 在 与 滑动 条 的 当前 状态 3 相对 应 的 位 置 上 。 

图 8.1 中 的 两 个 画面 演示 了 一 个 简单 的 滑动 条 在 浏览 器 中 的 初始 状态 。 其 中 左面 一 幅 画 面 
来 自 Opera 模拟 器 , 右面 一 幅 画 面 来 自 Android 版 Firefox 浏览 器 。 从 两 幅 画 面 的 对 比 中 可 以 看 
到 ，UI 组 件 在 不 同 的 浏览 器 中 的 显示 样式 略 有 不 同 。 

滑动 条 所 代表 的 数值 能 够 通过 滑 块 改变 , 如 图 8.2 所 示 , 注意 图 中 的 滑 块 正 处 于 操作 状态 。 
另外 ， 需 要 注意 的 是 ， 滑 动 条 前 面 的 输入 框 是 滑动 条 UI 组 件 的 一 部 分 ， 用 户 同样 可 以 直接 修 
改 滑 动 条 前 面 的 输入 框 中 的 数值 。 当 用 户 改变 了 输入 框 中 的 数值 以 后 ， 滑 块 会 自动 移动 到 滑动 
条 中 与 当前 值 相对 应 的 位 置 。 


滑动 条 滑动 条 滑动 条 
月 从 2 月 份 
8 内 1 1 


ER (Me FE 
图 8.1 滑动 条 的 默认 状态 图 8.2 通过 滑 块 改 变 输入 值 

2. 递增 量 

用 户 拖 动 图 8.2 中 的 滑 块 时 ,输入 框 中 的 数字 会 逐渐 增加 或 减少 ， 北 增 或 递减 的 幅度 是 1。 
1 是 jQuery Mobile 滑动 条 的 默认 递增 量 。 但 是 ， 实 际 情况 下 ， 递 增 量 并 不 总 是 1。 例 如 ， 世 纪 
是 以 100( 年 ) 为 一 个 递增 单位 ， 年 代 是 以 10( 年 ) 为 一 个 递增 单位 ， 而 调频 广播 的 频率 是 以 200 
(kHz) 或 者 0.2(MHz) 为 单位 的 。 为 了 适应 这 些 实际 需求 ， 我 们 还 应 该 为 滑动 条 设置 递增 量 ， 以 
替换 原始 的 默认 值 。 

修改 递增 量 的 方法 很 简单 ， 只 要 在 滑动 条 所 在 的 <input> 元 素 中 指定 step 属性 即 可 。 属 性 
step 的 值 可 以 是 整数 ， 也 可 以 是 小 数 。 代 码 8.2 在 代码 8.1 的 基础 上 稍 加 修改 ， 就 能 非常 快捷 
地 满足 实际 应 用 的 需要 。 

代码 8.2 自 定义 递增 量 的 滑动 条 

<!DOCTYPE html> 


<htm1> 
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<head> 

<title>jQuery Mobile - UI - Slider</title> 

<meta charset="utf-8" /> 

<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 

<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 

<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 

rel="stylesheet" /> 

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 

</head> 


<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 滑 动 条 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form target="#"> 
<label for="years"> 年 代 </label> 
<input type="range" name="years" id="years" 
value="2010" min="1940" max="2050" step="10"> 
</form> 
</div> 
</div> 
</body> 
</html> 


为 滑动 条 增加 step 属性 以 后 ， 滑 动 条 上 的 数值 变化 的 最 小 单位 就 会 被 新 的 递增 量 所 取代 。 
滑动 条 的 显示 效果 ， 在 静态 画面 上 没有 变化 ， 但 是 在 动态 效果 上 ， 由 于 递增 量 的 改变 ， 滑 块 每 
移动 一 步 的 距离 也 会 随 之 改变 。 这 一 变化 带 来 一 个 问题 需要 在 网 页 设计 上 加 以 考虑 ， 如 果 递 增 
量 对 于 有 效 数 值 范围 过 大 ， 滑 块 就 会 移动 很 快 ， 网 页 动画 效果 就 会 变 得 不 平滑 ， 而 当 递增 量 相 
对 于 有 效 数 值 范围 过 小 ， 滑 块 移动 变 得 很 慢 ， 滑 块 对 于 拖 动 的 反应 动作 就 会 明显 延迟 ， 造 成 网 

3. 样式 定制 


jQuery Mobile 提供 了 使 用 特定 属性 或 者 CSS 类 定制 滑动 条 UI 组 件 的 方法 。 下 面 介绍 几 种 
最 常见 的 样式 定制 。 

(1) 迷你 型 滑动 条 

迷你 (紧凑 ) 型 滑动 条 与 迷你 按钮 一 样 ， 通 过 data-mini=“*true”" 实 现 。 在 网 页 代码 中 ， 只 要 对 
滑动 条 所 在 的 <input> 元 素 添加 data-mini= “true" 即 可 。 比 如 下 面 的 代码 片段 ， 能 够 得 到 如 图 8.3 
所 示 的 迷你 型 滑动 条 : 

<label for="month"> 月 份 </1abel> 

<input type="range" name="month" id="month" 

value="3" min="1"” max="12" data-mini="true"> 


迷你 型 滑动 条 比 正常 情况 下 的 滑动 条 略为 细小 。 
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(2) 隐藏 标题 


滑动 条 中 的 标题 文字 是 从 <label> 元 素 获 得 , 即 由 <label> 元 素 中 的 for 属性 值 与 一 个 <input> 
元 素 的 id 属性 值 相 匹配 。 匹 配 成 功 以 后 ，<label> 元 素 中 所 含 的 文字 就 被 赋予 相应 的 <input> 元 
素 作为 输入 框 的 标题 文字 。 这 种 标题 与 输入 框 的 关联 形式 由 HIML 5 语法 决定 。 但 是 jQuery 


Mobile 提供 了 一 个 方法 ， 可 以 改变 这 样 的 默认 行为 ， 即 使 HTML 5 代码 仍然 保留 相同 的 结构 ， 


只 需 添 加 一 个 由 jQuery Mobile 提供 的 CSS 类 ， 滑 动 条 上 面 的 标题 就 能 够 被 隐藏 起 来 。 
在 下 面 的 代码 片段 中 ，<label> 元 素 中 添加 了 ui-hidden-accessible 类 以 后 ， 就 很 容易 地 达到 


隐藏 标题 的 效果 : 


<label for="month" class="ui-hidden-accessible"> 月 份 </1abel> 
<input type="range" name="month" id="month" value="3" min="1" max="12"> 


效果 如 图 8.4 所 示 。 
[sone Ce 
清 动 条 
月 份 3 国 
3 国 一 
-DD- 图 - 
8.3 迷你 滑动 条 8.4 ”标题 被 隐藏 的 滑动 条 


(3) 失效 状态 

<input> 元 素 的 disabled 属性 能 够 使 一 个 表单 元 素 处 于 失 
效 状 态 。jQuery Mobile 中 的 滑动 条 本 身 就 是 由 HIML 中 的 
<input> 元 素 形 成 的 ，disabled 属性 同样 适用 于 滑动 条 。 

由 于 disabled 属性 属于 布尔 型 ， 在 元 素 标 签 中 使 用 
disabled=“disabled”*"， 或 disabled=“， 或 直接 使 用 disabled， 
都 能 起 到 相同 的 作用 。 

下 面 的 代码 片段 演示 了 一 个 处 于 失效 状态 的 滑动 条 : 

<label for="month"> 月 份 </label> 

<input type="range" name="month" id="month" 

value="3" min="1" max="]12" disabled> 

当 滑 动 条 处 于 失效 状态 时 ， 就 会 与 其 他 处 于 失效 状态 的 
表单 元 素 一 样 ， 显 示 样 式 如 图 8.5 所 示 ， 变 得 比较 灰暗 ， 并 
且 用 户 无 法 通过 用 户 界 面 对 其 进行 任何 操作 。 


jamweohopme/cHou 太 革 ca。 | 


月 份 


和 已 一 


图 8.5 失效 的 滑动 条 
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8.1.2 ”区 间 滑 动 条 


1. 区 间 滑 动 条 的 构建 方法 


基本 滑动 条 能 够 用 于 输入 一 个 限定 取 值 范围 内 的 数字 值 ， 区 间 滑 动 条 在 此 基础 上 更 进 一 
步 ， 能 够 在 一 个 限定 的 范围 内 输入 两 个 值 ， 这 两 个 值 形 成 了 全 部 取 值 范围 内 的 一 个 区 间 。 从 网 
页 代码 上 看 , 区 间 滑 动 条 可 以 看 作 是 两 个 基本 滑动 条 的 组 合 , 第 一 个 滑 块 用 于 输入 区 间 的 下 限 ， 
第 二 个 滑 块 用 于 输入 区 间 的 上 限 。 

代码 8.3 演示 了 一 个 最 简单 的 区 间 滑 动 条 。 


代码 8.3 区间 滑动 条 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Range Slider</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 区 间 滑 动 条 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form target="#"> 
<div data-role="rangeslider"> 
<label for="min_year"> 年 </label> 
<input type="range" name="min year" id="min year™" 
value="1996" min="1980" max="2020"> 
<label for="max_year"> 年 </label> 
<input type="range" name="max year" id="max Year" 
value="2012" min="1980" max="2020"> 
</div> 
</form> 
</div> 
</div> 
</body> 
</html> 


运行 效果 如 图 8.6 所 示 。 
与 简单 滑动 条 的 区 别 是 ， 区 间 滑 动 条 使 用 了 容器 <div data-role-“rangeslider” >...</div>， 通 
过 设置 属性 data-role 的 值 为 “rangeslider"， 使 jQuery Mobile 为 这 个 容器 赋予 区 间 滑 动 条 的 样式 
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和 默认 行为 特征 。 区 间 滑 动 条 在 代码 中 包含 了 两 个 基本 滑动 
条 .。 虽然 两 个 基本 滑动 条 各 自 具 有 自己 的 <label> 元 素 用 作 滑动 
条 的 标题 ， 但 是 ， 在 区 间 滑 动 条 中 ， 首 选 第 一 个 基本 滑动 条 的 
<label> 元 素 被 用 作 区 间 滑 动 条 的 标题 。 如 果 第 一 个 基本 滑动 条 
的 <label> 缺 省 , 则 第 二 个 基本 滑动 条 的 <label> 会 被 用 作 区 间 滑 
动 条 的 标题 。 

区 间 滑 动 条 的 滑 块 可 以 设置 递增 量 。 递增 量 应 该 设置 到 每 
一 个 单独 的 滑动 条 中 。 设置 方法 与 基本 滑动 条 的 递增 量 设 置 方 
法 一 致 。 

2. 表现 样式 


区 间 滑 动 条 和 基本 滑动 条 有 很 多 十 分 相似 的 样式 定制 方 
法 ， 这 里 介绍 其 中 一 些 在 使 用 方法 上 的 细微 不 同 。 
(1) 迷你 型 滑动 条 


图 8.6 区间 滑动 条 


基本 滑动 条 和 区 间 滑 动 条 在 代码 上 的 一 大 区 别 在 于 滑动 条 的 容器 。 区 间 滑 动 条 通过 一 个 
<div data-role=“rangeslider”>...</div> 容 器 确定 滑动 条 的 范围 和 内 容 , 基本 滑动 条 则 不 需要 容器 ， 
直接 由 <input> 元 素 的 type=“range” 属 性 确定 UI 组 件 的 类 型 为 滑动 条 。 

当 需 要 把 滑动 条 设置 为 迷你 型 时 , data-mini=“true” 属 性 将 直接 被 赋予 基本 滑动 条 的 <input> 
元 素 ， 而 对 于 区 间 滑 动 条 ，data-mini=“true” 属 性 必须 被 添加 到 区 间 滑 动 条 的 容器 ， 而 不 是 其 中 


包含 的 每 一 个 单独 的 滑动 条 。 
(2) 高 亮 显示 


对 比 图 8.1 和 图 8.6， 可 以 看 到 区 间 滑 动 条 被 两 个 滑 块 限定 的 区 间 在 默认 情况 下 高 亮 显示 ， 
而 基本 滑动 条 并 不 采用 高 亮 显示 。 因 此 ， 在 默认 情况 下 ，“ 高 亮 ” 效 果 对 于 基本 滑动 条 处 于 关 
闭 状 态 ， 而 对 于 区 间 滑 动 条 则 处 于 开启 状态 。 从 两 种 滑动 条 所 表达 的 含义 来 看 ， 这 样 的 默认 显 


示 方 式 是 符合 我 们 通常 对 滑动 条 的 理解 方式 的 。 


“高 亮 ” 效 果 可 以 由 data-highlight 属性 值 为 true 或 者 false 决定 。 由 于 基本 滑动 条 和 区 间 


滑动 条 在 代码 结构 上 的 差异 , 对 于 基本 滑动 条 ,data-highlight 
属性 应 当 被 赋予 滑动 条 所 在 的 <input> 元 素 ,对 于 区 间 滑 动 条 ， 
data-highlight 属性 应 当 被 赋予 滑动 条 的 容器 。 

(3) 滑 轨 和 滑 块 的 样式 

一 个 滑动 条 由 滑 轨 和 滑 块 组 成 ，jQuery Mobile 允许 对 滑 
轨 和 滑 块 分 别 赋予 不 同 的 主题 样本 (swatch)。 我 们 曾经 使 用 了 
data-theme 属性 设置 一 个 UI 组 件 的 样式 ，data-theme 属性 在 
滑动 条 中 用 于 设置 滑 轨 和 滑 块 的 样式 ， 而 data-track-theme 属 
性 是 一 个 专门 用 于 设置 滑 轨 主题 样本 的 属性 。 

代码 8.4 同时 演示 了 基本 滑动 条 和 区 间 滑 动 条 的 样式 设 
置 方法 。 这 段 代 码 仅 使 用 了 jQuery Mobile 1.4 提供 的 默认 样 
本 a 和 b， 阅 读 代码 8.4 时 ， 应 当 对 照 图 8.7， 注 意 观 察 样 式 
主题 的 设置 对 滑 轨 、 滑 块 ， 以 及 数字 输入 框 产生 的 影响 。 


图 8.7 滑动 条 与 样式 主题 
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同样 ， 对 于 基本 滑动 条 ， 用 于 设置 样式 主题 的 两 个 属性 应 当 被 赋予 滑动 条 所 在 的 <input> 
元 素 ， 对 于 区 间 滑 动 条 ， 这 两 个 属性 应 当 被 赋予 滑动 条 的 容器 。 
代码 8.4 滑动 条 的 样式 主题 设置 方法 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - UI - Slider</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 


<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 


<body> 
<div data-rol page" data-theme="a"> 
<div data-role="header"> 
<h1> 滑 动 条 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form target="#"> 
<div> 
<label for="month"> 月 份 </label> 
<input type="range" 
name="month" id="month" 


value="3" min="]1" max="12" 
ta-theme="b" 
data-track-theme="a"> 
</div> 
<div data-role="rangeslider™" 
ta-theme="a" 
data-track-theme="b"> 
<label for="min_year"> 年 </label> 
<input type="range" name="min year" id="min year™" 
value="1996" min="1980" max="2020"> 
<label for="max_year"> 年 </label> 
<input type="range" name="max year" id="max year™" 
value="2012" min="1980" max="2020"> 
</div> 
</form> 
</div> 
</div> 
</body> 
</html> 
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8.2 列表 视 


jQuery Mobile 中 的 列表 视图 (Listview) 是 从 HTML 中 的 
无 序 和 有 序列 表演 化 而 来 的 。 图 8.8 是 一 个 在 普通 网 页 中 常 
见 的 列表 表现 形式 .在 一 个 普通 网 页 中 ,列表 通常 非常 简单 ， 2004 年 雅典 奥运 会 (项 腊 ) 
而 在 jQuery Mobile 中 ,列表 视图 无 论 是 在 UI 组 件 的 外 观 上 ， ?90 局 呈 汉 全 天， 
还 是 在 作用 上 , 都 进行 了 大 量 的 优化 , 使 列 表 视图 在 菜单 制 。。 'ee0 和 中富 守 


2012 年 伦敦 奥运 会 《英国 ) 
2008 年 北京 奥运 会 〔 中 国 ) 


作 等 方面 的 作用 占有 一 定 的 优势 。 。 1984 年 洛杉矶 奥运 会 (美国 ) 
8.2.1 无 序 与 有 序列 表 视图 图 8.8 普通 网 页 中 的 无 序列 表 
1. 无 序列 表 视 图 


在 jQuery Mobile 开发 中 , 大 量 使 用 了 HTML 中 的 无 序列 表 。 一 个 HTML 的 无 序列 表 就 是 
<ul> 元 素 以 及 包含 在 <ul> 元 素 中 的 <li> 元 素 的 集合 。 

无 序列 表 在 网 页 中 通常 表现 为 图 8.8 中 的 样式 。 在 jQuery Mobile 中 , 把 一 个 无 序列 表 转 换 
成 列表 视图 只 需要 在 <ul> 元 素 中 加 入 data-role=“listview” 即 可 ，jQuery Mobile 会 根据 data-role 
的 定义 ， 在 页 面 初始 化 过 程 中 对 相应 列表 赋予 列表 视图 的 样式 与 默认 的 行为 方式 。 

代码 8.5 演示 了 一 个 最 简单 的 无 序列 表 视 图 。 


代码 8.5 无 序列 表 视 图 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Listview</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 列 表 视 图 </h1> 
</div> 
<div class="ui-content" role="main"> 
<ul data-role="listview"> 
<1i>2012 年 伦敦 奥运 会 (英国 ) </1i> 
<1i>2008 年 北京 奥运 会 (中 国 ) </1i> 
<1i>2004 年 雅典 奥运 会 (希腊 ) </1i> 
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<1i>2000 年 悉尼 奥运 会 (澳大利亚 ) </1i> 
<1i>1996 年 亚特兰大 奥运 会 (美国) </1i> 
<1i>1992 年 巴塞 罗 那 奥运 会 (西班牙 ) </1i> 
<1i>1988 年 汉城 奥运 会 (韩国 ) </1i> 
<1i>1984 年 洛杉矶 奥运 会 (美国) </1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


显示 效果 如 图 8.9 所 示 。 
2. 有 序列 表 视 图 


HTML 中 的 有 序列 表 是 由 <ol> 元 素 与 <ol> 元 素 包含 的 一 系列 <li> 元 素 的 集合 构成 的 。 当 把 
HTML 的 有 序列 表 转 化 成 jQuery Mobile 的 有 序列 表 视 图 时 ， 也 同样 只 需要 在 <ol> 元 素 中 添加 
data-role=“listview” 即 可 。jQuery Mobile 会 在 页 面 初始 化 过 程 中 对 相应 的 列表 赋予 列表 视图 的 
样式 与 默认 的 行为 方式 。 

把 代码 8.5 中 的 无 序列 表 <ul> 改 写 为 有 序列 表 <ol>， 我 们 就 能 够 得 到 如 图 8.10 所 示 的 有 序 
列表 视图 。 


IGCCSESEZTTI3 CE rr 

jqm.webhop .me Jqm.webhop me 
列表 视图 列表 视图 

2012 年 伦敦 奥运 会 (英国 ) 1，2012 年 伦敦 奥运 会 (英国 

2008 年 北京 奥运 会 中国) 2 2008 年 北京 奥运 会 【中国 

2004 年 四 由 奥运 会 大 拓 ) 3 2004 年 条 典 奥运 会 (类 有 


2000 年 悉尼 奥运 会 (澳大利亚 ) 


2000 年 悉尼 奥运 会 澳大利亚) 


1996 年 亚 栈 兰 大 奥运 会 (美国 ) 


1996 年 亚特兰大 奥运 会 美国 ) 


1992 年 巴塞 罗 那 奥运 会 西班牙 ) 


1992 年 巴 帘 罗 屠 奥 运 会 (西班牙) 
1988 年 汉城 奥运 会 韩国 ) 7，1988 年 汉城 奥运 会 ( 转 国 ) 


1984 年 洛杉矶 奥运 会 (美国 ) 


1984 年 洛杉矶 奥运 会 《美国 ) 


图 8.9 无 序列 表 视 图 图 8.10 有 序列 表 视图 


在 开发 HTML 网 页 时 ， 有 序列 表 <ol> 还 可 以 选用 属性 type、start 和 reversed， 分 别 代 表 了 
数字 序号 类 型 (数字 、 大 小 写字 母 ， 或 者 大 小 写 罗马 数字 )， 起 始 数 字 和 倒序 排列 。 需 要 注意 的 
是 ,在 jQuery Mobile 的 有 序列 表 视图 中 ， 数 字 序 号 可 能 是 由 CSS 插入， 也 可 能 是 由 JavaScript 
程序 插入 。jQuery Mobile 会 根据 浏览 器 对 CSS 的 支持 程度 决定 采用 的 具体 方案 , 因此 , jQuery 
Mobile 的 有 序列 表 视 图 在 数字 序号 的 实现 上 有 别 于 原始 的 HIML 网 页 ，<ol> 元 素 的 type 和 
reversed 属性 可 能 无 法 达到 预期 的 目的 。 
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3. inset 样 式 


图 8.9 和 图 8.10 中 的 列表 视图 都 采用 了 默认 的 贯穿 整个 页 面 宽 度 的 显示 方式 。 这 样 的 显示 
方式 适合 于 全 屏 菜单 的 设计 ， 如 果 列 表 视 图 需要 与 其 他 UI 组 件 共同 组 织 页 面 的 内 容 ， 列 表 视 
图 应 该 两 端 缩 进 , 便于 与 其 他 UI 组 件 对 齐 ， 并 且 应 该 与 其 他 UI 组件 保留 一 定 的 间隔 ， 以 利于 
区 分 不 同 的 UI 组 件 。jQuery Mobile 的 data-inset 属性 就 能 够 帮助 我 们 实现 这 个 目标 。 在 编写 网 
页 代码 时 ， 只 要 把 data-inset=“true” 插 入 到 定义 列表 视图 的 <ol> 或 者 <ul> 元 素 中 即 可 。 

图 8.11 是 一 个 无 序列 表 视 图 在 Android 系统 中 的 实际 显示 效果 。 


4. 列表 视图 与 链接 


在 此 之 前 , 我 们 见 到 的 列表 视图 都 是 用 于 以 静态 方式 单纯 显示 数据 的 目的 。 在 实际 应 用 中 ， 
列表 视图 中 的 每 一 个 条 目 常常 被 绑 定 了 一 个 链接 ， 就 像 常 见 的 电子 邮件 列表 、 短 信 列 表 、 日 程 
计划 列表 等 这样, 点 击 列表 视图 中 的 一 行 , 就 会 跳 转 到 另外 一 个 页 面 , 或 者 触发 一 个 JavaScript 
事件 。 在 列表 视图 中 加 入 链接 只 需 在 每 一 个 产生 列表 条 目的 <li> 元 素 中 加 入 <a> 元 素 , 这 样 ， 加 
入 了 <a> 元 素 的 列表 条 目 就 被 绑 定 了 一 个 链接 。 

代码 8.6 是 在 一 个 具有 inset 样式 的 列表 视图 中 为 每 一 个 条 目 加 入 一 个 链接 。 列表 视图 会 自 
动 获得 表示 链接 的 默认 图 标 ， 效 果 如 图 8.12 所 示 。 

[2 | ETESEEEEEEEE7 TE 


2012 年 伦敦 和 过 会 英国) 北京 © 
2008 年 北京 奥运 会 【中 国 ) 2] © 
2004 年 雅典 奥 运 会 类 有 ) 万 州 © 


2000 年 是 尼 奥运 会 《澳大利亚 
1996 年 亚特兰大 奥运 会 美国 
1992 年 巴 窜 罗 那 奥运 会 【西班牙 ) 
1988 年 汉城 奥运 会 【 转 国 ) 


1984 年 洛杉矶 奥运 会 (美国 ) 


8.11 inset 样 式 的 无 序列 表 视 图 8.12 ” 带 有 链接 的 inset 列 表 视 图 


代码 8.6 ”列表 视图 链接 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Listview</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
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rel="stylesheet" /> 
<meta name="Viewport"” content="width=device-width,initial-scale=1.0"> 


<style> 
img { 
width: 100%; 
height: auto; 
} 
</style> 
</head> 
<body> 


<div data-role="page" id="home"> 
<div data-role="header"> 
<h1> 列 表 视图 </h1> 
</div> 
<div class="ui-content" role="main"> 
<ul data-role="listview" data-inset="true"> 
<li><a href="#beijing" data-transition="slide"> 


北京 </a></1i> 

<li><a href="#shenyang" data-transition="slide"> 
沈阳 </a></1i> 

<li><a href="#suzhou" data-transition="slide"> 
苏州 </a></1i> 

</ul> 
</div> 
</div> 


<div data-role="page" id="beijing"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 北 京 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div> 北 京 故宫 </div> 
<div> 
<img src="images/beijing_01.jpg”alt=" 北 京 "> 
</div> 
</div> 
</div> 
<div data-role="page" id="shenyang"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 沈 阳 </hl> 
</div> 
<div class="ui-content" role="main"> 
<div> 沈 阳 北 陵 </div> 
<div> 
<img src="images/shenyang_01.jpg”alt=" 沈 阳 "> 
</div> 
</div> 
</div> 


294 < 


第 8 章 jQuery Mobile 的 UI 组 件 ( 续 ) 


<div data-role="page”" id="suzhou"> 
<div data-role="header" data-add-back-btn="true™ 
data-back-btn-text=" 返 回 "> 
<h1> 苏 州 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div> 木 渎 </div> 
<div> 
<img src="images/suzhou 01.jpg”alt=" 苏 州 "> 
</div> 
</div> 
</div> 
</body> 
</html> 


8.2.2 ”列表 视图 与 图 标 


前 面 图 8.12 显示 的 是 一 个 在 列表 视图 中 使 用 图 标的 实例 。 列 表 视 图 除了 自动 添加 表示 链接 
的 图 标 以 外 ， 还 能 够 加 入 与 列表 条 目 相关 的 图 标 、 缩 略图 ， 并 且 能 够 按照 需要 ， 更 改 系统 自动 
添加 的 图 标 等 。 


1. 更 改 链接 条 目 上 的 默认 图 标 


当 列表 视图 中 的 条 目 被 绑 定 了 一 个 链接 以 后 , 这 个 条 目 会 自动 获得 一 个 如 图 8.12 中 所 示 的 
链接 图 标 。 在 某 些 情 况 下 ， 一 个 更 能 体现 条 目 实际 用 途 的 图 标 将 大 大 提高 网 页 的 用 户 体验 。 替 
换 系统 的 默认 链接 图 标 需 要 在 创建 条 目的 <li> 元 素 中 设置 data-icon 属性 ， 并 指定 图 标的 名 称 。 
图 标的 名 称 可 以 是 任何 一 个 jQuery Mobile 1.4 图 标 集 中 的 图 标 名 称 ， 也 可 以 是 一 个 由 开发 者 自 
定义 的 图 标 (本 书 将 在 第 10 章 中 介绍 自 定义 图 标的 制作 方式 )。 

代码 8.7 中 的 列表 视图 由 4 个 条 目 组 成 ， 每 一 个 条 目 所 在 的 <li> 元 素 都 声明 了 一 个 特定 的 
图 标 ， 这 些 图 标 将 在 网 页 中 取代 系统 的 默认 图 标 。 


代码 8.7 更 改 条 目 链接 中 的 系统 默认 图 标 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Listview</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" id="home"> 
<div data-role="header"><h1> 列 表 视图 </h1></div> 
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<div class="ui-content" role="main"> 
<ul data-role="listview" data-inset="true"> 
<1i data-icon="home"> 
<a href="#" data-transition="slide"> 主 页 </a></1i> 
<1i data-icon="gear"> 
”data-transition="slide"> 配 置 </a></1i> 
<li data-icon="info"> 
<a href="#" data-transition="slide"> 帮 助 </a></1i> 
<1i data-icon="phone"> 
<a href="#" data-transition="slide"> 联 系 </a></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


显示 效果 如 图 8.13 所 示 。 
2. 与 列表 条 目 相 关 的 自选 图 标 
列表 视图 中 的 一 些 条 目 可 能 会 因为 某 些 需 要 , 在 条 目的 行 首 显示 一 个 与 当前 条 目 相关 的 图 


<a href=" 


标 。 常 见 的 应 用 包括 在 产品 列表 中 显示 产品 商标 或 者 公司 标志 , 或 者 在 与 国家 相关 的 内 容 之 前 
显示 国旗 等 。 这 类 图 标 是 以 普通 的 <img> 方 式 插入 图 片 ， 并 且 必 须 指定 CSS 类 ui-li-icon。 作 为 
图 标的 图 片 ， 通 常 是 宽 16px， 高 度 在 11~16px 之 间 的 。 当 然 ， 这 还 取决 于 条 目 中 字体 的 大 小 ， 
以 上 参考 值 适用 于 默认 状态 (字体 大 小 为 lem 或 者 16px)。 


代码 8.8 为 每 一 个 条 目 分 别 加 入 了 一 个 16x16px 的 国旗 图 标 ， 显 示 效 果 如 图 8.14 所 示 。 


IGCCGIEZTYDI 
Jam webhop me : jam webhop me 
列表 视图 列表 视图 
主页 (a) 下 ”2012 年 伦 放 天 运 会 英国) © 

配置 © 国 2008 年 北京 奥运 会 (中国 ) 
帮助 © 澡 2004 年 绪 典 奥运 会 ( 希 箭 ) © 
联系 © 


图 8.13 ”从 系统 图 标 集中 选取 的 链接 图 标 图 8.14 与 条 目 内 容 相 关 的 图 标 


代码 8.8 为 条 目 链接 添加 图 标 


<!DOCTYPE html> 
<html> 
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<head> 
<title>jQuery Mobile - UI - Listview</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"><h1> 列 表 视 图 </h1></div> 
<div class="ui-content" role="main"> 
<ul data-role="listview" data-inset="true"> 
<li><a href="#"> 
<img src="images/flag gb.png" alt="2012 年 伦敦 奥运 会 " 
class="ui-1i-icon">2012 年 伦敦 奥运 会 (英国) 
</a></1Li> 
<li><a href="#"> 
<img src="images/flag_cn.png”alt="2008 年 北京 奥运 会 " 
class="ui-1i-icon">2008 年 北京 奥运 会 (中 国 ) 
</a></1i> 
<li><a href="#"> 
<img src="images/flag gr.png"” alt="2004 年 雅典 奥运 会 " 
class="ui-li-icon">2004 年 雅典 奥运 会 (希腊) 
</a></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


3. 缩 略 图 


缩 略图 同样 也 与 列表 条 目 中 的 内 容 相关 , 在 网 页 代码 中 也 与 在 条 目 中 通过 插入 图 片 的 方式 
插入 图 标 非常 相似 。 在 网 页 外 观 方面 ， 缩 略图 比 图 标 更 大 。jQuery Mobile 对 于 列表 条 目 中 的 缩 
略图 是 边 长 为 80px 的 正方 形 。 当 图 片 是 一 个 矩形 时 ， 如 果 长 边 超 过 80px，jQuery Mobile 会 自 
动 把 这 一 条 边 调整 为 80px， 短 边 也 会 按 比 例 随 之 调整 。 如 果 图 片 的 长 和 宽 都 小 于 80px， 图 片 
将 保持 原样 。 因 此 ， 用 作 缩 略图 的 图 片 应 该 是 边 长 大 于 80px 的 正方 形 ， 这 样 才能 保障 输出 效 
果 的 统一 。 在 网 页 代码 方面 ， 缩 略图 同样 是 通过 插入 图 片 的 方式 ， 但 是 在 插入 的 <img> 元 素 中 
不 能 使 用 CSS 类 ui-li-icon。 如 果 <li> 元 素 的 内 容 中 第 一 个 子 元 素 是 <img>, 则 适用 jQuery Mobile 
的 缩 略 图 规则 ，jQuery Mobile 会 自动 调整 图 片 大 小 。 

代码 8.9 是 一 个 使 用 缩 略图 的 实例 ， 如 果 读 者 使 用 本 书 附带 的 实例 程序 ， 可 以 发 现 3 幅 国 
旗 的 原始 图 片 大 小 各 不 相同 。 从 图 8.15 中 的 显示 效果 看 , 这 些 图 片 的 高 度 都 被 调整 为 相同 的 高 
度 。 另 外 ， 由 于 缩 略 图 使 用 80px 固定 高 度 ， 整 个 列表 条 目的 高 度 会 因为 缩 略图 的 缘故 而 放大 ， 
这 样 ， 含 有 缩 略图 的 条 目 应 该 被 设计 成 多 行文 字 的 格式 ， 使 图 片 和 文字 的 位 置 关系 比较 协调 。 
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Jqam webhop me 和 
列表 视图 

NN LO 2012 年 夏季 下 运 会 
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2008 年 黑 季 奥运 会 © 


2004 年 夏季 兢 运 会 
a 


© 


| 向 


8.15 ”列表 视图 中 的 缩 略 图 


代码 8.9 列表 条 目 缩 略 图 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Listview</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 列 表 视图 </h1> 
</div> 
<div class="ui-content" role="main"> 
<ul data-role="listview" data-inset="true"> 
<li><a href= 
<img src="images/flag gb 3.png" alt="2012 年 伦敦 奥运 会 "> 
<h2>2012 年 夏季 奥运 会 </h2> 
<P> 英 国 伦敦 </p> 
</a></1i> 
<li><a href="#"> 
<img src="images/flag cn 3.png" alt="2008 年 北京 奥运 会 "> 
<h2>2008 年 夏季 奥运 会 </h2> 
<p> 中 国 北京 </p> 
</a></1i> 
<li><a href="#"> 
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<img src="images/flag gr 3.png" alt="2004 年 雅典 奥运 会 "> 
<h2>2004 年 夏季 奥运 会 </h2> 
<p> 希 腊 雅典 </p> 
</a></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


8.2.3 ”列表 视图 的 内 容 管理 与 应 用 技巧 


这 一 小 节 将 介绍 列表 条 目 中 的 内 容 组 织 方式 ， 重 点 在 于 条 目 中 的 分 隔行 (divider)、 文 字 内 
容 的 格式 、 计 数 气泡 (Count Bubble)， 以 及 内 容 过 滤器 。 


1. 分 隔行 


分 隔行 用 于 把 列表 视图 中 的 条 目 分 组 。 这 样 的 用 法 在 下 拉 菜 单 和 列表 中 都 比较 常见 。 
jQuery Mobile 列表 视图 中 的 空格 行 实质 上 是 列表 视图 中 的 一 个 条 目 , 如 果 把 一 个 普通 的 条 目 加 
上 角色 属性 data-role=“list-divider”， 这 个 条 目 就 变 成 了 一 个 分 隔行 。 
代码 8.10 演示 了 一 个 简单 的 列表 视图 ， 并 且 通 过 分 隔行 把 列表 视图 按照 国家 分 为 三 组 。 


代码 8.10 ”列表 视图 分 隔行 


<!DOCTYPE html> 
<html> 
<head> 

<title>jQuery Mobile - UI - Listview</title> 

<meta charset="utf-8" /> 

<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 

<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 

<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 

rel="stylesheet" /> 

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 

<div data-role="page" data-theme="a"> 

<div data-role="header"> 
<h1> 列 表 视 图 </h1> 


</div> 


<div class="ui-content" role="main"> 
<ul data-role="listview" data-inset="true"> 

<1i data-role="1list-divider"> 中 国 </1i> 
<li><a href="#">PEK 北京 首都 国际 机 场 </a></1i> 
<li><a href="#">PVG 上 海 浦东 国际 机 场 </a></1i> 
<1i><a href="#">SHA 上 海 虹 桥 国际 机 场 </a></1i> 
<1i data-role="list-divider"> 美 国 </1i> 
<1i><a href="#">JEK 纽约 肯尼迪 国际 机 场 </a></1i> 
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<1i><a href="#">LGA 纽约 拉 瓜 迪 亚 国际 机 场 </a></1i> 
<1i><a href="#">LAX 洛杉矶 国际 机 场 </a></1i> 
<1i data-role="1ist-divider"> 加 拿 大 </1i> 
<li><a href="#">YYZ 多 伦 多 皮尔 还 国际 机 场 </a></1i> 
<1i><a href="#">YVR 温哥华 国际 机 场 </a></1i> 
<1i><a href="#">YUL 蒙特 利 尔 特 鲁 多 国际 机 场 </a></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


显示 效果 如 图 8.16 所 示 。 

除了 手工 指定 分 隔行 以 外 , jQuery Mobile 中 的 分 隔行 还 可 以 由 系统 自动 添加 。 系 统 自动 产 
生 的 分 隔行 以 列表 条 目 中 的 内 容 为 依据 ， 按 照 首 字母 (或 者 第 一 个 汉字 ) 实 行 分 组 。 如 果 第 一 个 
字符 是 字母 ， 则 自动 转换 成 大 写 形式 。 

自动 产生 的 分 隔行 仅仅 按照 列表 条 目 中 的 内 容 依次 进行 分 组 ， 不 会 改变 条 目的 顺序 ， 也 不 
会 合并 多 次 出 现 的 分 组 。 

代码 8.11 演示 了 一 个 飞机 场 列表 按照 IATA 代码 进行 分 组 的 实例 ， 其 中 P 和 工 字 组 都 出 
现 了 超过 一 次 , 如 图 8.17 所 示 。 如 果 列 表 条 目的 内 容 完 全 是 中 文 ， 系 统 就 会 产生 “上 ”、“ 纽 ” 


等 分 组 。 


[Se 0 0 | [Se 5740co| 
jam.webhop.me } jam.webhop.me : 
列表 视图 列表 视图 

中 国 p 

PEK 北京 首 村 国际 机 场 © PEK 北京 首都 国际 机 场 © 

PVG 上 海 浦东 国际 机 场 © PVYG 上 海 浦东 国际 机 场 © 

SHA 上 海 虹 桥 国际 机 场 © 四 

而 SHA 上 海 红 桥 国际 机 场 © 

JFK 细 约 崩 尼 迪 国 际 机 声 © 

LGA 组 约 拉 凤 迪 亚 国际 机 场 © 人 © 

LAX 洛杉矶 国际 机 声 © 

i LGA 纽约 拉 风 包 亚 国 际 机 场 © 

YYZ 多 伦 多 皮尔 进 国际 机 场 © sa nda © 

YVR 温哥华 国际 机 声 € 
EE 
8.16 ”列表 视图 中 的 分 隔行 8.17 ”列表 视图 中 的 自动 分 隔行 


代码 8.11 列表 视图 自动 分 隔行 


<!DOCTYPE html> 

<html> 

<head> 
<title>jQuery Mobile - UI - Listview</title> 
<meta charset="utf-8" /> 
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<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 


UI 组件 ( 续 ) 


<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 


<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 


<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


</head> 


<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 列 表 视 图 </h1> 
</div> 
<div class="ui-content" role="main"> 
<ul data-role="listview" data-inset="true" 
data-autodividers="true"> 
<1i><a href="#">PEK 北京 首都 国际 机 场 </a></1i> 
<1i><a href="#">PVG 上 海 浦东 国际 机 场 </a></1i> 
<1i><a href="#">SHA 上 海 虹桥 国际 机 场 </a></1i> 
<1i><a href="#">JEK 纽约 肯尼迪 国际 机 场 </a></1i> 
<1i><a href="#">LGA 纽约 拉 瓜 迪 亚 国际 机 场 </a></1i> 
<1i><a href="#">LAX 洛杉矶 国际 机 场 </a></1i> 
<1i><a href="#">YYZ 多 伦 多 皮尔 逊 国际 机 场 </a></1i> 
<1i><a href="#">YVR 温哥华 国际 机 场 </a></1i> 
<1i><a href="#">YUL 蒙特 利 尔 特 鲁 多 国际 机 场 </a></1i> 
<1i><a href="#">PAP 太子 港 国际 机 场 </a></1i> 
<1i><a href="#">JAA 贾 拉 拉巴 德 机 场 </a></1i> 
<1i><a href="#">SCN 萨 尔 布 昌 肯 机 场 </a></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


在 默认 情况 下 ，jQuery Mobile 对 列表 视图 中 的 分 隔行 采用 样式 样本 b。 当 需要 改变 分 隔行 
的 样式 时 ,需要 采用 data-divider-theme 属性 ， 并 把 该 属性 添加 到 用 于 创建 列表 视图 的 <ul> 或 者 


<ol> 元 素 中 。 


<ul> 或 者 <ol> 元 素 中 的 data-theme 属性 用 于 设置 整个 列表 视图 的 样式 。 除 此 以 外 ， 列 表 视 
图 根据 实际 情况 ， 还 有 其 他 一 些 类 似 于 data-divider-theme 的 样式 属性 ， 稍 后 将 逐一 介绍 ,读者 


应 该 了 解 这 些 属性 的 区 别 ， 并 在 移动 网 站 开发 过 程 中 选用 正确 的 属性 。 
2. 多 行 格式 


我 们 在 代码 8.9 中 已 经 使 用 了 条 目 内 容 的 多 行 模式 。 在 多 行 模式 下， 通常 有 一 个 小 标题 通 
过 <h2> 或 者 任何 一 个 <h1>~<h6> 元 素 标识 。 其 他 段落 分 别 位 于 多 个 <p> 段 落 中 。 这 里 唯一 比较 
特殊 的 是 当 一 个 <p> 元 素 应 用 了 CSS 类 ui-li-aside 以 后 ， 该 段落 将 被 当 作 附 加 信息 显示 在 一 个 


条 目的 右上 角 。 
代码 8.12 演示 了 一 个 常见 的 日 程 表 网 页 。 
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代码 8.12 多 行 模式 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - UI - Listview</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 


<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 列 表 视图 </h1> 
</div> 
<div class="ui-content" role="main"> 
<ul data-role="listview" data-inset="true"> 
<1i data-role="list-divider">2015-5-4， 星期 一 </1i> 
<li><a href="#"> 
<h2> 每 周 例会 </h2> 
<p> 一 周 工作 安排 。 讨 论 开发 计划 的 调整 与 技术 难题 的 攻关 ， 
并 对 下 一 阶段 可 能 遇 到 的 问题 进行 风险 评估 和 对 策 研究 。</p> 
<p class="ui-li-aside">9:15 - 10:00</p> 


</a></1i> 
<li><a href="#"> 

<h2> 五 四 青年 节 纪念 活动 </h2> 

<p> 参 加 者 : 所 有 员工 </p> 

<p> 五 四 精神 演讲 比赛 </p> 

<p class="ui-li-aside">15:00 - 17:00</p> 
</a></1i> 


<li data-role="list-divider">2015-5-7， 星期 三 </1i> 
<li><a href="#"> 
<h2> 开 发 进度 协调 会 </h2> 
<p> 参 加 者 : 开发 部 门 经 理 、 软 件 架 构 师 、 项 目 经 理 </p> 
<p> 对 各 项 目 需 求 变动 、 开 发 组 人 员 调 动 等 进行 协调 安排 。<p> 
<p class="ui-li-aside">9:30 - 10:00</p> 
</a></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


运行 效果 如 图 8.18 所 示 。 注 意 其 中 时 间 的 显示 位 置 。 
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3. 计数 


在 一 些 需要 显示 统计 数值 或 者 是 评比 得 分 的 场合 , 列表 视图 中 的 每 一 个 条 目 需 要 增加 一 个 
数字 输出 框 ， 为 此 ，jQuery Mobile 提供 了 计数 气泡 的 功能 ， 在 气泡 形状 的 输出 框 中 输出 信息 。 

代码 8.13 演示 了 计数 气泡 的 实现 方法 。 计 数 气泡 在 代码 中 为 一 个 被 赋予 了 CSS 类 
ui-li-count 的 <span> 元 素 (注意 <span> 是 一 个 内 联 元 素 ), <span> 元 素 所 含 的 内 容 就 是 在 气泡 形状 
输出 框 中 显示 的 内 容 。 代 码 8.13 的 实际 效果 如 图 8.19 所 示 。 


[2 ee 40 1120 | EEXIEEEEEEEE TEZIE 
jqm webhop me 3 2013 世 界 十 大 家 必 - 
1 量 尔 本 (省 大 利 亚 ) ”ss 
2015.5.4， 星 期 一 2 维也纳 (奥地利) "0 
ssa00 3 肖 杰 华 ( 加 训 大 ) m0 
nearmmannenne. © a 6 
五 四 前 年 节 纪念 活动 Te 5 卡尔 加 里 《加拿大 ) “sO 
> 5 交大 村 杆 (澳大利亚 ) “sO 
7 村 尼 (澳大利亚 ) “1! © 
4 赫尔辛基 ( 节 兰 ) » 0 
© 9 区 斯 澳大利亚 ) ”» © 
10 奥克兰 (新 西关 ) 7 © 


资料 来 源 ; 《经 济 学 人 》2013.08.30 


图 8.18 多 行 模式 与 附加 信息 图 8.19 条 目的 计数 信息 


代码 8.13 ”计数 气泡 的 使 用 方法 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Listview</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"> 
</script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=]1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1>2013 世界 十 大 宜 居城 市 </h1> 
</div> 
<div class="ui-content" role="main"> 
<ol data-role="listview" data-inset="true"> 
<1i><a href= 


> 303 


[ jQuery Mobile 移 动 网 站 开发 


墨尔本 (澳大利亚 ) 
<span class="ui-1i-count">97.5</span> 
</a></1i> 
<li><a href="#"> 
维也纳 (奥地利 ) 
<span class="ui-li-count">97.4</span> 
</a></1i> 
<li><a href="#"> 
温哥华 (加拿大) 
<span class="ui-li-count">97.3</span> 
</a></1i> 
<li><a href="#"> 
多 伦 多 (加 拿 大 ) 
<span class="ui-li-count">97.2</span> 
</a></1i> 
<li><a href="#"> 
卡尔 加 里 (加 拿 大 ) 
<span class="ui-li-count">96.6</span> 
</a></1i> 
<li><a href="#"> 
阿 德 莱 德 (澳大利亚 》 
<span class="ui-li-count">96.6</span> 
</a></1i> 
<li><a href="#"> 
悉尼 (澳大利亚 ) 
<span class="ui-li-count">96.1</span> 
</a></1i> 
<1i><a href="#"> 
赫尔辛基 〈 芬 兰 ) 
<span class="ui-li-count">96.0</span> 
</a></1i> 
<li><a href="#"> 
珀 斯 (澳大利亚) 
<span class="ui-li-count">95.9</span> 
</a></1i> 
<1i><a href="#"> 
奥克兰 (新西兰 ) 
<span class="ui-li-count">95.7</span> 
</a></1i> 
</ol> 
<div> 资 料 来 源 : 《经 济 学 人 》2013-08-30</div> 
</div> 
</div> 
</body> 
</html> 


虽然 这 项 功能 的 术语 叫 作 Counter Bubble， 但 在 实际 上 ， 它 的 功能 并 不 一 定 与 计数 有 关 ， 
甚至 不 一 定 是 数字 。<span> 元 素 包含 的 内 容 允 许 使 用 非 数字 字符 串 。 
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4. 过 滤器 


当 一 个 列表 视图 包含 比较 多 的 条 目 时 ， 一 个 条 目 内 容 过 滤器 将 使 列表 的 检索 更 加 快捷 方 
便 。 下 面 以 检索 飞机 场 为 例 ， 介 绍 条 目 内 容 过 滤器 的 基本 编写 方法 与 延伸 。 如 代码 8.14 所 示 。 


代码 8.14 ”基本 的 列表 条 目 内 容 过 滤器 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Listview</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 列 表 视图 </h1> 
</div> 
<div class="ui-content" role="main"> 
<ul data-role="listview" data-inset="true" 
data-filter="true" 
data-filter-placeholder=" 搜 索 机 场 . .."> 
<1i><a href="#">PEK 北京 首都 国际 机 场 </a></1i> 
<1i><a href="#">PVG 上 海 浦东 国际 机 场 </a></1i> 
<1i><a href="#">SHA 上 海 虹桥 国际 机 场 </a></1i> 
<1i><a href="#">JFK 纽约 肯尼迪 国际 机 场 </a></1i> 
<1i><a href="#">LGA 纽约 拉 瓜 迪 亚 国际 机 场 </a></1i> 
<1i><a href="#">LAX 洛杉矶 国际 机 场 </a></1i> 
<1i><a href="#">YYZ 多 伦 多 皮尔 撑 国际 机 场 </a></1i> 
<1i><a href="#">YVR 温哥华 国际 机 场 </a></1i> 
<1i><a href="#">YUL 蒙特 利 尔 特 鲁 多 国际 机 场 </a></1i> 
<1i><a href="#">PAP 太子 港 国际 机 场 </a></1i> 
<1li><a href="#">JAA 贾 拉 拉巴 德 机 场 </a></1i> 
<1i><a href="#">SCN 萨 尔 布 昌 肯 机 场 </a></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


正如 代码 8.14 中 所 显示 的 那样 , 为 一 个 列表 视图 增加 内 容 过 滤 功 能 只 需要 在 <ol> 或 者 <ul> 
元 素 中 添加 属性 data-filter-“true"，jQuery Mobile 会 自动 地 为 列表 视图 组 件 增加 一 个 搜索 框 。 
为 了 使 搜索 框 更 加 易于 用 户 理解 ，data-filter-placeholder 属性 能 够 在 搜索 框 内 加 入 一 些 说 明文 
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字 ， 当 用 户 在 搜索 框 中 输入 文字 之 后 ， 这 些 说 明文 字 会 自动 隐藏 ， 因 此 不 会 对 网 页 的 正常 使 用 
造成 影响 。 

图 8.20 是 带 有 内 容 过 滤器 的 视图 列表 的 实际 使 用 效果 。 从 后 两 个 画面 中 可 以 看 到 , 内 容 过 
滤 是 按照 子 字符 串 匹 配 的 方式 进行 的 。 不 论 输入 的 是 条 目 内 容 的 首 字 母 ， 还 是 内 容 中 间 的 一 部 
分 ， 或 者 过 滤 条 件 是 英文 或 者 中 文 ， 过 滤器 都 能 够 正确 地 匹配 。 


CEIOIRRRRSEZIIED 
Jam webhop me : Jam webhop me : Jam webhop me 1 
列表 视 有 列表 视图 列表 视图 

a a € a 到 

PEK 北京 首 玫 国际 机 场 © PEK 北京 首 玫 国际 机 声 © YYz 多 伦 多 皮尔 避 国 际 机 场 © 
PVG 上 海 浦东 国际 机 场 © PVG 上 海 浦东 国际 机 场 © YUL 租 特 利 尔 特 便 多 国际 机 场 © 
SHA 上 海 虹 桥 国际 机 场 © PAP 太子 港 国际 机 场 © 

JFX 组 约 肯尼迪 国际 机 场 © 

LGA 组 约 拉 几 过 亚 国际 机 场 © 

LAX 洛杉矶 国际 机 场 © 

YYZ 多 伦 多 皮尔 避 国 际 机 场 © 

YVR 温 琐 华 国 际 机 场 © 

Yu 妇 特 利 尔 特 鲁 多 国际 机 场 © 
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8.20” 带 有 过 滤器 的 列表 视图 的 默认 状态 以 及 过 滤器 的 工作 方式 


8.3 可 收 放 的 UI 组 件 


8.3.1 可 收 放 的 UI 组 件 及 其 样式 特征 


可 收 放 的 UI 组 件 (collapsible)， 就 像 它 的 名 字 本 身 ， 非 常 直 白 ， 就 是 这 种 组 件 由 收 起 和 放 
开 两 种 主要 状态 组 成 。 这 样 的 UI 组 件 ， 能 够 在 屏幕 布局 设计 上 使 内 容 更 加 紧凑 ， 减 少 有 效 屏 
幕 空间 的 浪费 ， 也 能 够 使 网 页 用 户 免 于 被 非 主要 内 容 分 心 ， 提 高 网 页 内 容 的 可 读 性 。 

1. 可 收 放 组 件 的 构成 


-个 基本 的 可 收 放 组 件 由 一 个 容器 、 一 个 标题 ， 以 及 内 容 组 成 。 根 据 可 收 放 内 容 的 特点 ， 
以 上 3 个 组 成 部 分 有 两 种 主要 的 实现 方法 。 

如 果 组 件 的 内 容 不 是 表单 元 素 ， 容 器 则 是 由 最 常见 的 <div> 形 成 ， 并 由 角色 属性 data-role= 
“collapsible” 把 整个 容器 包含 的 HIML 代码 片段 定义 为 一 个 可 收 放 的 组 件 。<h1>~<h6> 中 的 元 
素 在 HTML 中 含义 为 处 于 不 同 层次 的 标题 行 ， 在 可 收 放 的 UI 组件 中 ， 标 题 由 <h1>~<h6> 中 的 
任何 一 个 元 素 形成 。 组 件 的 内 容 部 分 定义 在 一 个 或 多 个 <p> 段 落 中 。 

代码 8.15 演示 了 一 个 最 简单 的 可 收 放 UI 组 件 。 
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代码 8.15 一 个 最 基本 的 可 收 放 组 件 


<!DOCTYPE html> 


<htm]l> 

<head> 
<title>jQuery Mobile - UI - Collapsible</title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 


<script sr js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 可 收 放 的 UI 组 件 </h1> 
</div> 
<div class="ui-content" role="main"> 
<dqiv data-role="collapsible"> 
<h4> 中 国 古 典 四 大 名 著 </h4> 


<p> 三 国 演义 、 红 楼 梦 、 水 洲 、 西 游记 </p> 
</div> 
</div> 
</div> 

</body> 

</html> 

其 中 包含 了 如 图 8.21 所 示 的 容器 、 标 题 、 内 容 3 个 组 成 部 分 。 
TESTSEZTTSI [S52 561 | 
am webhop me E am webhop me : 

可 改 放 的 Ui 组件 梧 履 放 的 UI 组 件 
人 中 国 古典 四 大 名 着 局 中 国 古典 四 大 名 着 
三 国 注 义 、 红 超 区、 水 济 、 西 包 


[| -oo 0 < 。 。 | 
8.21 一 个 最 简单 的 可 收 放 的 组 件 
如 果 一 个 可 收 放 组 件 的 内 容 是 一 个 表单 ， 那 么 这 个 组 件 仍然 是 由 3 个 部 分 组 成 的 。 组 件 的 
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容器 这 时 变 成 了 <fieldset>， 并 在 该 元 素 中 设置 data-role=“collapsible”。 组 件 的 标题 部 分 由 
<legend> 元 素来 完成 。 组 件 的 内 容 部 分 包含 了 一 个 或 者 多 个 表单 元 素 ， 如 果 需 要 ， 可 以 使 用 
controlgroup 容器 (role=“controlgroup”) 把 一 些 单 选 或 者 多 选 按 钮 组 合 到 一 起 。 

代码 8.16 演示 了 一 个 包含 表单 元 素 的 可 收 放 组 件 。 


代码 8.16 ”包含 表单 的 可 收 放 组 件 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Collapsible</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> <h1l> 可 收 放 的 UI 组 件 </h1l> </div> 
<div class="ui-content" role="main"> 
<form> 
<fieldset data-role="collapsible"> 
<legend> 客 户 满意 度 调查 </legend> 
<div data-role="controlgroup"> 
<label for ="satis-5"> 非 常 满意 </label> 
<input type="radio" id="satis-5" name="satis" 
Value="5"> 
<label for ="satis-4"> 满 意 </label> 
<input type="radio" id="satis-4" name="satis" 
Value="4"> 
<label for ="satis-5"> 一 般 </label> 
<input type="radio" id="satis-3" name="satis" 
Value="3"> 
<label for ="satis-2"> 不 满意 </label> 
<input type="radio" id="satis-2" name="satis" 
Value="2"> 
<label for ="satis-1"> 非 常 不 满意 </1label> 
<input type="radio" id="satis-1"” name="satis" 
Value="1"> 


</div> 
<label for ="comments"> 简 短 留言 </1abel> 
<textarea id="comments" name="comments"> 
</textarea> 
<a href="#" data-role="button" data-inline="true"> 发 送 </a> 
</fieldset> 
</form> 
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</div> 
</div> 
</body> 
</html> 


运行 效果 如 图 8.22 所 示 。 

2. 可 收 放 组 件 的 图 标 

可 收 放 的 组 件 除 了 具有 迷你 等 普遍 适用 的 样式 定制 方法 外 , 系统 自动 添加 的 图 标 是 这 个 组 
件 的 一 个 明显 的 特点 。jQuery Mobile 的 可 收 放 组 件 在 默认 情况 下 使 用 图 标 “+” 和 “-” 分 别 代 
表 收 起 和 展开 状态 ， 图 标 显示 在 组 件 的 左 端 。 使 用 自选 图 标 和 改变 图 标的 显示 位 置 的 方法 非常 
类 似 于 在 按钮 中 做 相同 的 设置 ， 比 如 要 改变 图 标的 显示 位 置 ， 就 需要 通过 data-iconpos 属性 来 
完成 。 由 于 可 收 放 组 件 拥有 展开 和 收 起 两 种 状态 ， 这 两 种 状态 所 使 用 的 图 标 各 自 通过 属性 
data-expanded-icon 和 data-collapsed-icon 来 表述 。 图 标 名 称 可 以 使 用 jQuery Mobile 系统 图 标 集 
中 的 图 标 名 称 ， 也 可 以 使 用 自 定义 图 标的 名 称 。 代 码 8.17 是 在 代码 8.15 的 基础 上 ， 通 过 以 上 
三 个 属性 对 组 件 中 使 用 的 图 标 以 及 图 标 显示 位 置 进行 定制 ， 显 示 效 果 如 图 8.23 所 示 。 

ECEESEEEEEEEEEC EEE CCSPFXZI 


jam webhop me 日 jam webhop me 


可 收 放 的 UI 组 件 可 收 放 的 UI 组 件 


人 震 户 测度 测 查 中 国 古 内 四 大 各 区 © 


非常 满 昌 国清 义 、 红 林 梦 、 水 洲 、 西 著 亿 


图 8.22 包含 表单 元 素 的 可 收 放 组 件 图 8.23 自选 图 形 和 可 定制 的 图 标的 显示 位 置 


代码 8.17 ”使 用 自选 图 标 和 变更 图 标 位 置 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Collapsible</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 


> 309 


国 jQuery Mobile 移 动 网 站 开发 


<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 可 收 放 的 UI 组 件 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div data-role="collapsible" data-iconpos="right" 
data-collapsed-icon="carat-d" 
data-expanded-icon="carat-u"> 
<h4> 中 国 古典 四 大 名 著 </h4> 
<p> 三 国 演义 、 红 楼 梦 、 水 浒 、 西 游记 </p> 
</div> 
</div> 
</div> 
</body> 
</html> 


默认 的 可 收 放 组 件 在 初始 化 以 后 处 于 收 起 状态 ， 如 果 需 要 把 初始 状态 设置 为 展开 ， 应 该 设 
置 data-collapsed 属性 为 false。 

另外 ， 可 收 放 组 件 的 主题 样式 可 以 从 两 个 方面 来 进行 设置 ，data-theme 用 于 设置 可 收 放 组 
件 当 收 起 以 后 那 一 部 分 的 样式 , 而 data-content-theme 只 能 设置 可 收 放 组 件 的 内 容 部 分 , 这 一 部 
分 在 组 件 处 于 收 起 状态 时 是 不 可 见 的 。 

对 于 可 收 放 的 组 件 ， 有 一 个 比较 特殊 的 属性 data-collapse-cue-text， 用 于 设置 服务 于 屏幕 阅 
读 器 的 文字 说 明 。 一 个 可 收 放 组 件 的 默认 语音 文字 是 英文 click to collapse contents， 通 过 这 个 
属性 ， 可 以 根据 实际 用 途 配 置 更 加 清晰 的 说 明 ， 如 果 屏 幕 阅读 器 支持 ， 甚 至 可 以 用 它 来 实现 多 
国文 字 的 支持 。 


8.3.2 可 收 放 组 件 的 组 合 与 手风琴 模式 


可 收 放 的 UI 组 件 可 以 独立 使 用 ， 也 可 以 多 个 组 件 组 合 在 一 起 使 用 。 当 多 个 可 收 放 组 件 组 
合 在 一 起 时 ， 能 够 以 两 种 主要 方式 呈现 给 用 户 。 
1. 可 收 放 组 件 的 组 合 


当 多 个 全 宽度 (data-inset="false”) 的 可 收 放 组 件 出 现在 一 起 时 ,这 些 可 收 放 组 件 就 形成 了 一 
个 组 合 ， 用 户 可 以 同时 展开 其 中 一 个 或 多 个 组 件 的 内 容 。 

代码 8.18 即 实现 了 可 收 放 组 件 组 合 。 

代码 8.18 一 个 基本 的 可 收 放 组 件 组 合 


<!DOCTYPE html> 

<html> 

<head> 
<title>jQuery Mobile - UI - Collapsible</title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
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<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 


<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 


<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> <h1l> 可 收 放 的 UI 组件 </h1l> </div> 
<div class="ui-content" role="main"> 


<div data-role="collapsible" data-inset="false"> 


<h4> 中 国 古典 四 大 名 著 </h4> 
<p> 三 国 演义 、 红 楼 梦 、 水 洲 、 西 游记 </p> 
</div> 
<div data-role="collapsible" data-inset="false"> 
<h4> 元 杂剧 四 大 悲剧 </h4> 
<p> 窦 娥 冤 、 汉 宫 秋 、 格 桐 雨 、 赵 氏 孤 儿 </p> 
</div> 
<div data-role="collapsible" data-inset="false"> 
<h4> 莎 士 比 亚 四 大 喜剧 </h4> 
<p> 威 尼斯 商人 、 仲 夏 夜 之 梦 、 皆 大 欢喜 、 第 十 二 夜 </p> 
</div> 
<div data-role="collapsible" data-inset="false"> 
<h4> 莎 士 比 亚 四 大 悲剧 </h4> 
<p> 了 哈姆雷特 、 马 克 白 、 李 尔 王 、 奥 赛 罗 </p> 
</div> 
</div> 
</div> 
</body> 
</html> 


运行 效果 如 图 8.24 所 示 。 
[mero 40 | [ome de 
可 改 放 的 Ui 组件 


人 中 国 古典 四 大 名 看 CO 中 国 古山 四 大 名 村 


©O 元 mm 大 二 中 个 i 大 


O 卫士 比 亚 四 大喜 出 
更 失 机 、 汉 襄 状 、 梢 机 雨 、 赵 氏 本 
© 5+ttwm 大 eM 
© + 比 下 大 豆 届 
威尼斯 商人 、 促 夏 春之 梦 、 芹 大 欢 罕 、 第 十 二 而 


© 多 + 比 下 大 问 册 


从 妈 雪 特 、 马 克 白 、 李 尔 王 、 奥 于 多 


[ <- co oo 有 有 <- 。 | 
图 8.24 可 收 放 组 件 的 默认 初始 状态 和 内 容 展开 方式 


这 个 组 合 实例 中 的 每 一 个 可 收 放 组 件 的 内 容 都 比较 简单 。 在 实际 应 用 中 ， 一 个 可 收 放 组 件 
的 内 容 既 可 以 是 简单 的 文本 ， 也 可 以 是 一 个 列表 视图 ， 或 者 是 由 许多 元 素 组 成 的 复杂 的 表单 。 
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-个 可 收 放 组 件 组 合 中 的 各 个 组 件 是 相互 独立 的 ， 互 不 依赖 ， 因 此 经 常会 见 到 一 个 组 合 中 的 各 
个 组 件 的 内 容 的 格式 并 不 相同 。 在 网 站 设计 中 ， 即 使 数据 格式 各 不 相同 ， 网 站 的 整体 风格 样式 


2. 手风琴 模式 


手风琴 (accordiom) 模 式 在 jQuery Mobile 1.4 中 被 称 为 可 收 放 的 组 件 集 (Collapsible Set),“ 手 
风琴 ”这 个 名 称 能够 在 jQuery Mobile 1.3 以 及 jQuery UI 中 相应 UI 组件 的 文档 中 看 到 。 这 里 本 
书 作者 仍 以 “手风琴 ”这 个 更 加 形象 的 名 称 来 代替 它 在 jQuery Mobile 1.4 中 的 正式 名 称 。 

“手风琴 ”与 可 收 放 的 组 件 组 合十 分 相似 。 下 面 通过 代码 8.19 和 图 8.25 来 说 明 “手风琴 ” 
模式 的 编写 方法 ， 以 及 它 与 可 收 放 的 组 件 组 合 的 细微 区 别 。 


代码 8.19 使 用 “手风琴 ” 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Collapsible</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 可 收 放 的 UI 组件 </h1> 
</div> 
<div class="ui-content" role="main"> 
<dqiv data-role="collapsibleset" 
data-theme="b" data-content-theme="a"> 
<div data-role="collapsible" data-inset="false"> 
<h4> 中 国 古典 四 大 名 著 </h4> 
<p> 三 国 演义 、 红 楼 梦 、 水 游 、 西 游记 </p> 


</div> 


<div data-role="collapsible" data-inset="false"> 
<h4> 元 杂剧 四 大 悲剧 </h4> 
<p> 窦 娥 守 、 汉 宫 秋 、 格 桐 雨 、 赵 氏 孤 儿 </p> 
</div> 
<div data-role="collapsible" data-inset="false"> 
<h4> 莎 士 比 亚 四 大 喜剧 </h4> 
<p> 威 尼斯 商人 、 仲 夏 夜 之 梦 、 皆 大 欢喜 、 第 十 二 夜 </p> 
</div> 
<div data-role="collapsible" data-inset="false"> 
<h4> 莎 士 比 亚 四 大 悲剧 </h4> 
<p> 哈 姆 雷 特 、 马 克 白 、 李 尔 王 、 奥 赛 罗 </p> 
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</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


更 类 壳 、 汉 宫 忆 、 梧 机 十 、 赵 氏 台 


图 8.25 “手风琴 ”的 初始 状态 和 内 容 展开 方式 

“手风琴 ”在 代码 上 仍然 是 由 一 系列 可 收 放 组 件 构成 的 ， 但 是 ， 在 这 些 可 收 放 组 件 的 外 层 
增加 了 一 个 容器 data-role=“collapsibleset”"。 这 层 容 器 能 够 从 整体 上 协调 每 一 个 可 收 放 组 件 的 展 
开 状 态 ， 在 任何 一 个 时 刻 ， 始 终 保持 不 超过 一 个 可 收 放 组 件 处 于 展开 状态 。 也 就 是 说 ， 当 一 个 
可 收 放 组 件 被 展开 时 , 另 一 个 已 经 处 于 展开 状态 的 可 收 放 组 件 立 即 会 被 收 起 。 因此 , 在 图 8.24 
中 ， 我 们 看 到 有 3 个 可 收 放 组 件 处 于 展开 状态 ， 而 在 图 8.25 中 ， 处 于 展开 状态 的 可 收 放 组 件 
不 会 超过 一 个 。 
在 代码 8.19 中 , 我 们 还 能 够 看 到 为 一 个 “手风琴 ” 定义 样式 风格 的 方法 , 属性 data-theme 
和 data-content-theme 只 需要 简单 地 定义 在 容器 <div> 中 ， 那 么 “手风琴 ”中 的 每 一 个 可 收 放 组 
件 都 能 获得 上 述 两 个 属性 所 定义 的 样式 风格 。 


8.4 面 板 


jQuery Mobile 中 的 面板 (paneD) 是 一 个 非常 实用 的 UI 组 件 。 在 jQuery Mobile 1.3 常规 内 置 
面板 的 基础 上 ，jQuery Mobile 1.4 增加 了 外 部 面板 的 功能 ， 使 移动 网 站 的 全 局 菜单 设计 变 得 非 
常 简 单 。 


8.4.1 面板 的 基本 构成 与 工作 方式 


在 一 些 网 站 中 ， 我们 点 击 一 个 按钮 ,或 者 触动 屏幕 的 边缘 ,一 个 菜单 就 会 从 屏幕 的 左 侧 或 
者 右 侧 边 缘 移 入 屏幕 ， 供 用 户 选择 ， 这 样 的 菜单 工作 方式 ， 在 jQuery Mobile 中 是 通过 面板 组 
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件 实现 的 。 
1. 面板 的 基本 构成 与 工作 方式 


与 其 他 UI 组 件 略 有 不 同 ， 面 板 涉及 了 比较 多 的 网 页 动作 ， 各 个 组 成 部 分 之 间 通 过 元 素 的 
id 值 来 控制 行为 方式 。 由 于 面板 的 使 用 超出 了 一 个 单纯 的 用 户 界面 组 件 的 范畴 ， 我 们 需要 通过 
代码 8.20， 从 代码 内 部 来 帮助 我 们 快速 理解 一 个 最 基本 面板 的 组 成 结构 和 工作 方式 。 


代码 8.20 ”常规 内 置 面 板 


<!DOCTYPE html> 

<html> 

<head> 
<title>jQuery Mobile - UI - Panel</title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 

<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 

<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<style> 
.EullWidthImg { 
width: 100%; 
height: auto7 
} 
</style> 
</head> 
<body> 


<div data-role="page" data-theme="a" id="myPage 1"> 
<div data-role="panel" id="myPanel 1"> 
<p> 面 板 内 容 1</p> 
<p> 
<a href="#myPage 1" data-rel="close" data-role="button" 
data-inline="true"> 关 闭 面板 </a> 
</p> 
</div> 
<div data-role="header"> 
<h1> 面 板 </h1> 
</div> 
<div class="ui-content" role="main"> 
<img src="images/shenyang_01.jpg" alt=" 沈 阳 北 陵 " class="fullWwidthImg" /> 
<a href="#myPanel 1" data-role="button" data-inline="true"> 
打开 /关闭 面板 </a> 
</div> 
</div> 
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jqm .webhop me 和 jqm_webhop me 
面板 
面板 内 容 1 
关闭 面板 
打开 /关闭 面板 打开 /关闭 了 


8.26 一 个 基本 面板 的 初始 状态 和 打开 状态 


首先 , 一 个 常规 的 内 置 面板 是 一 个 网 页 页 面 的 一 部 分 , 面板 代码 由 一 个 被 data-role=“panel” 
属性 修饰 的 <div> 容 器 组 成 。 其 次 ， 面 板 和 工具 栏 一 样 ， 是 页 面 组 成 部 分 之 一 ， 代 码 出 现 的 位 
置 有 一 定 的 要 求 。 一 个 内 置 面 板 的 代码 位 于 页 面容 器 (data-role=“page) 之 中 ， 与 页 头 
(data-role="“header”)、 内 容 (class=“ui-content”) 或 者 页 尾 (data-role=“footer”) 并 列 。 

作为 页 面 结构 之 一 , 在 默认 的 初始 状态 下 , 面板 如 图 8.26 中 第 一 幅 画 面 那样 , 是 不 可 见 的 ， 
打开 一 个 面板 可 以 通过 一 个 链接 按钮 来 完成 。 按 钮 中 的 链接 必须 指向 网 页 中 面板 的 id 值 。 当 
按 下 这 个 按钮 以 后 ， 由 href 属性 指向 的 面板 将 被 移入 到 屏幕 中 。 再 次 按 下 同一 个 按钮 ， 面 板 将 
被 关闭 。 如 果 需 要 在 面板 中 增加 一 个 按钮 ， 用 于 关闭 自己 所 在 的 面板 ， 这 个 在 面板 中 的 关闭 按 
钮 必须 满足 两 个 条 件 : 第 一 ， 按 钮 必须 使 用 data-rel=“close” 修 饰 ， 第 二 ， 按 钮 中 的 链接 必须 指 
向 当面 板 关 闭 以 后 在 屏幕 上 显示 的 页 面 的 这 值 。 这 里 涉及 了 两 个 这 值 ， 即 面板 的 id 值 以 及 面 
板 退 出 以 后 在 屏幕 上 显示 的 页 面 的 id 值 。 这 两 个 id 值 必须 正确 设置 。 

2. 多 个 页 面 中 的 面板 


代码 8.20 代表 了 面板 最 简单 的 一 种 使 用 方法 。 通常 ， 一 个 网 站 由 许多 页 面 构成 ,下 面 的 代 
码 8.21 通过 两 个 页 面 中 各 自 出 现 的 面板 来 说 明 面板 在 多 页 情况 下 的 使 用 方法 。 


代码 8.21 常规 内 置 面板 在 多 页 结构 中 的 使 用 方法 


<!DOCTYPE html> 

<html> 

<head> 
<title>jQuery Mobile - UI - Panel</title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 

<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 

<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 

<style> 
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-EullwWidthImg { 


width: 100%; 
height: auto; 
} 
</style> 
</head> 
<body> 


<div data-role="page" data-theme="a" id="myPage 1"> 
<div data-role="panel" id="myPanel 1"> 
<p> 面 板 内 容 1</p> 
<p> 
<a href="#myPage 1" data-rel="close" data-role="button" 
data-inline="true"> 关 闭 面板 </a> 
</p> 
</div> 
<div data-role="header"> 
<h1> 面 板 </hl> 
</div> 
<div class="ui-content" role="main"> 
<img src="images/shenyang_01.jpg" alt=" 沈 阳 北 陵 " class="fullwidthImg" /> 
<a href="#myPage 2" data-role="button"> 上 海 科 技 馆 </a> 
<a href="#myPanel 1" data-role="button" data-inline="true"> 
打开 /关闭 面板 </a> 
</div> 
</div> 
<div data-role="page" data-theme="a" id="myPage 2"> 
<div data-role="panel" id="myPanel 2"> 
<p> 面 板 内 容 2</p> 
<p> 
<a href="#myPage 2" data-rel="close" data-role="button" 
data-inline="true"> 关 闭 面板 </a> 
</p> 
</div> 
<div data-role="header"> 
<h1> 面 板 </h1> 
</div> 
<div class="ui-content" role="main"> 
<img src="images/shanghai 01.jpg”alt=" 上 海 科技 馆 " 
class="fullWidthImg" /> 
<a href="#myPage 1" data-role="button"> 沈 阳 北 陵 </a> 
<a href="#myPanel 2" data-role="button" data-inline="true"> 
打开 /关闭 面板 </a> 
</div> 
</div> 
</body> 
</html> 


面板 在 单 页 和 多 页 环境 下 的 使 用 方法 是 一 致 的 。 代码 8.21 中 出 现 了 两 个 页 面 , 每 一 个 页 面 
中 都 插入 了 面板 。 为 了 便于 观察 ， 两 个 面板 中 使 用 的 文字 说 明 略 有 不 同 。 这 段 代 码 说 明 的 主要 
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问题 是 ， 常 规 面 板 在 代码 中 需要 被 重复 插入 到 每 一 个 页 面 中 ， 即 使 面板 中 的 内 容 一 致 ， 仍 然 会 
形成 大 量 元 余 代 码 。 由 于 面板 代码 的 元 余 ， 每 一 次 出 现 都 需要 使 用 不 同 的 面板 id 值 。 如 果 网 
站 是 由 静态 页 面 组 成 ， 代 码 见 余 除了 降低 代码 易 维 护 性 以 外 ， 不 至 于 导致 太 多 的 技术 难题 ,但 
是 ， 当 页 面 是 通过 模板 动态 生成 时 ， 动 态 创 建 和 维护 id 值 就 会 变 得 比较 困难 。 

3. 面板 的 显示 方式 与 行为 特点 

让 我 们 再 来 回顾 一 下 代码 8.20 中 面板 的 工作 方式 。 当 按 下 网 页 中 的 按钮 以 后 , 当前 屏幕 向 
右 移 动 , 面板 从 屏幕 左 侧 边缘 逐步 露出 , 直到 面板 如 图 8.26 中 的 第 二 幅 画 面 那 样 完全 显示 为 止 。 
这 个 动画 过 程 涉及 到 两 个 关于 面板 的 属性 。data-position 属性 用 于 设置 面板 的 显示 位 置 ， 它 的 
默认 值 为 "leff"， 即 面板 出 现在 屏幕 的 左 侧 边缘 ， 如 果 把 这 个 属性 设置 为 "right"， 面 板 将 显示 在 
屏幕 的 右 侧 边缘 ， 如 图 8.27 所 示 。data-display 属性 用 于 决定 面板 出 现 的 动画 方式 。 这 个 属性 
有 3 个 可 选 的 属性 值 :“reveal" 是 默认 值 ， 表 示 面 板 在 显示 之 前 已 经 被 定位 在 屏幕 边缘 ， 在 当 
前 屏幕 向 左 或 向 右 移动 时 ， 逐 步 露出 原先 被 覆盖 的 面板 ; “overlay" 表 示 当 前 屏幕 不 动 ， 面 板 从 
屏幕 的 左 侧 或 者 右 侧 移入 ， 局 部 覆盖 当前 屏幕 画面 ， 如 图 8.28 所 示 ;“push” 表 示 面 板 在 移动 的 
过 程 中 推动 当前 屏幕 ， 两 者 同时 发 生动 画 效 果 。 


jqm webhop me jam.webhop me 
面板 内 容 1 面板 内 容 1 
关闭 面板 关闭 面板 
打开 /关闭 


图 8.27 面板 在 屏幕 右 侧 显示 图 8.28 面板 在 屏幕 右 侧 以 overlay 方 式 显示 


面板 除了 可 以 通过 代码 8.20 中 的 链接 按钮 方式 关闭 外 , 在 主屏 幕 上 的 任意 位 置 单 击 或 者 在 
面板 上 轻 轻 滑动 ， 都 能 够 关闭 当前 面板 。 


8.4.2 ”外 部 面板 


内 置 面 板 的 代码 元 余 问 题 可 以 通过 外 部 面板 来 解决 。 当 使 用 外 部 面板 时 ， 面 板 代码 必须 从 
原先 的 页 面 代码 中 独立 出 来 ， 放 和 置 在 每 一 个 页 面 (data-role=“page”) 之 外 。 由 于 页 面 之 外 的 代码 
不 会 随 着 页 面 进行 初始 化 ， 当 网 页 文档 加 载 完成 后 ， 需 要 对 面板 代码 执行 手工 初始 化 过 程 。 

代码 8.22 中 ， 使 用 了 外 部 工具 栏 (参考 本 书 的 6.1.2 小 节 ) 和 外 部 面板 。 
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代码 8.22 ”外 部 面板 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Panel</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<style> 
-EullwWidthImg { 
width: 100%; 
height: auto; 
} 
</style> 
<script> 


$ (document) .on ("pagecreate", function() { 
$("[data-role='listview']") .listview(); 
$("[data-role='panel']") .panel (); 
Ds; 
</script> 
</head> 
<body> 
<div data-role="page" data-theme="a" id="myPage 1"> 
<div data-role="header" data-position="fixed"> 
<a href="#leftPanel" data-icon="bars" data-iconpos="notext"> 
主 菜单 </a> 
<h1> 城 市 旅游 </h1> 
</div> 
<div class="ui-content" role="main"> 
<img src="images/shenyang 01.jpg" alt=" 沈 阳 北 陵 " 
class="fullWidthImg" /> 
<a href="#myPage_ 2" data-role="button"> 前 往 --> 上 海 </a> 
</div> 
</div> 
<div data-role="page" data-theme="a" id="myPage 2"> 
<div data-role="header" data-position="fixed"> 
<a href="#leftPanel" data-icon="bars" data-iconpos="notext"> 
主 菜单 </a> 
<h1> 城 市 旅游 </h1> 
</div> 
<div class="ui-content" role="main"> 
<img src="images/shanghai 01.jpg” alt=" 上 海 科技 馆 " 
class="fullWidthIimg" /> 
<a href="#myPage 1” data-role="button"> 前 往 --> 沈 阳 </a> 
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</div> 


</div> 


<div data-role="panel" id="leftPanel"> 


<ul data-role="listview" data-inset="false"> 


<1i><a href="#"> 城 市 简介 </a></1i> 
<li><a href="#"> 主 要 景点 </a></1i> 
<1i><a href="#"> 民 俗人 文 </a></1i> 
<l1i><a href="#"> 宾 馆 酒店 </a></1i> 
<1i><a href="#"> 特 色 小 吃 </a></1i> 
<1i><a href="#"> 公 共 交 通 </a></1i> 
<1i><a href="#"> 铁 路 </a></1i> 

<1i><a href="#"> 航 空 </a></1i> 

<1i><a href="#"> 临 近 城 市 </a></1i> 


</ul> 


</div> 


</body> 
</html> 


需要 注意 的 是 , 代码 中 的 面板 部 分 不 属于 任何 一 个 页 面 ， 当 这 一 部 分 代码 被 panel0 方 法 手 
工 初始 化 以 后 ， 网 页 中 的 任何 一 个 页 面 都 可 以 通过 这 个 外 部 面板 的 id 值 访问 到 这 个 面板 ， 这 


样 ， 同 一 个 面板 就 被 了 


当 使 用 全 局 菜单 以 后 ， 


Jam webhop me : Jam webhop me : 
城市 简介 oo 城市 简介 SS) 
主要 最 点 9| 主要 最 点 9| 
民 个 人 文 © 民 从 人文 © 
突 志 酒店 © RR © 
特色/ 小吃 © 特色 小吃 © 

公共 交通 © 区 © 
bd © 人 © es 
外 空 © i [3 © - 
个 近 城 市 © 人 6 城市 © 


图 8.29 一 个 外 部 面板 被 插入 到 两 个 页 面 中 


EE 复 利用 ， 减 少 了 代码 的 见 余 。 代 码 8.22 能 够 得 到 图 8.29 中 那样 的 显示 
效果 ， 其 中 的 外 部 面板 被 填充 了 一 个 全 宽度 的 列表 视图 ， 形 成 了 一 个 常见 的 全 局 菜单 。 


-个 必须 考虑 的 问题 就 是 菜单 内 容 与 当前 网 页 内 容 的 关联 性 。 如 果 


外 部 菜单 中 的 代码 对 于 整个 网 站 是 统一 的 ， 那 么 怎样 才能 建立 全 局 菜单 与 当前 网 页 内 容 的 关 


联 ， 即 菜单 中 的 “城市 简介 ”与 当前 的 “沈阳 ”或 者 “上海 ”等 城市 的 关联 ?这 在 网 站 设计 中 
可 以 通过 多 种 JavaScript 技巧 来 实现 ， 例 如 动态 设置 全 局 菜单 中 的 链接 ， 或 者 把 当前 网 页 的 id 


作为 参数 与 全 


见 的 JavaScript 技巧 。 


局 菜单 中 的 链接 共同 形成 一 个 能 够 带 有 参数 的 链接 等 , 这些 都 是 在 网 站 开发 中 常 


> 319 


DU jQuery Mobile 移 动 网 站 开发 


8.5 选择 菜单 


HTML 中 的 <select> 和 <option> 在 网 页 中 产生 一 个 下 拉 菜 单 。 这 两 个 元 素 在 jQuery Mobile 
中 除了 其 基本 的 使 用 方法 以 外 ， 还 有 一 些 特殊 的 表现 方式 。 


8.5.1 选择 菜单 的 基本 表现 形式 


1. 基本 的 选择 菜单 


<select> 和 <option> 元 素 能 够 在 HTML 网 页 中 产生 一 个 下 拉 菜单 。 在 jQuery Mobile 中 ， 选 
择 菜单 (Select Menu) 就 基于 这 两 个 常用 的 HTML 元 素 。 这 两 个 元 素 在 HTML 普通 网 页 和 jQuery 
Mobile 网 页 中 的 作用 是 一 致 的 ， 因此， 选择 菜单 本 身 是 一 个 非常 容易 理解 ， 也 非常 容易 使 用 的 
UU 组 件 ， 但 是 ， 在 设计 网 站 的 过 程 中 ， 需 要 注意 一 些 比 较 容易 引起 混淆 的 术语 和 概念 。 

<select> 和 <option> 在 jQuery Mobile 中 仍然 可 以 被 理解 为 一 个 下 拉 菜 单 (注意 区 分 这 一 小 节 
提 到 的 下 拉 菜单 与 下 一 小 节 中 提 到 的 定制 菜单 或 者 弹出 菜单 )。 

代码 8.23 演示 了 一 个 如 图 8.30 所 示 的 最 基本 的 下 拉 菜 单 。 


代码 8.23 ”基本 选择 菜单 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - SelectMenu</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"><h1> 选 择 菜 单 </h1></div> 
<div class="ui-content" role="main"> 
<form target="#"> 
<div class="ui-field-contain"> 
<label for="airport"> 机 场 </label> 
<select name="airport" id="airport"> 
<option value="PEK"> 北 京 首都 国际 机 场 </option> 
<option value="PVG"> 上 海 浦东 国际 机 场 </option> 
<option value="SHA"> 上 海 虹 桥 国际 机 场 </option> 
<option value="CAN"> 广 州 白云 国际 机 场 </option> 
<option value="CTU"> 成 都 双流 国际 机 场 </option> 
</select> 
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</div> 
</form> 
</div> 
</div> 
</body> 
</html> 


和 四 mr wenhep me cja sx ] > 三 
选择 某 单 
机 场 | 上 海 姑 桥 国际 机 声 ©| 
[下 训 站 胡 本 际 机 声 
上 江 潜 国际 机 声 


8.30 ”由 选择 菜单 组 件 在 Firefox 桌 面 浏览 器 上 形成 的 下 拉 菜 单 


选择 菜单 组 件 在 HTML 代码 方面 与 普通 网 页 一 致 ， 这 一 点 与 其 他 很 多 UI 组 件 需要 通过 
data-role 属性 或 者 CSS 类 来 定义 一 个 组 件 有 所 不 同 。 但 是 同时 ,选择 菜单 组 件 在 很 多 移动 浏览 
器 上 表现 为 弹出 菜单 ， 例 如 ， 图 8.31 演示 了 相同 的 代码 分 别 在 Chrome 移动 浏览 器 和 Firefox 
移动 浏览 器 中 ， 当 菜单 被 打开 时 的 情形 。 


北京 首都 国际 机 场 
北京 首 攻 国际 机 场 
上 海 浦东 国际 机 场 

上 海 浦东 国际 机 场 


上 海 虹桥 国际 机 场 上 海 红 业 国际 机 场 


广州 自 云图 际 机 场 
广州 白云 国际 机 场 


成 攻 双 六 国际 机 场 
成 都 双流 国际 机 场 


图 8.31 下 拉 菜 单 在 Chrome 移 动 浏览 器 ( 左 ) 和 Firefox 移 动 浏览 器 ( 右 ) 中 的 表现 方式 
在 移动 浏览 器 中 , 下拉 菜 单 以 弹出 方式 显示 。 在 不 同 的 浏览 器 中 , 表现 样式 还 会 略 有 不 同 。 
为 了 避免 不 必要 的 混淆 ， 这 里 把 常规 的 下 拉 菜 单 称 为 选择 菜单 (Select Menu)， 而 在 下 一 小 节 中 
出 现 的 真正 以 弹出 方式 显示 的 菜单 称 为 定制 菜单 (Custom Select Menu)。 


2. 菜单 中 的 图 标 
-个 还 没有 打开 的 菜单 在 默认 情况 下 在 右 端 显示 一 个 向 下 的 箭头 (data-icon=“arrow-d”) 作 
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为 菜单 的 图 标 。 使 用 data-icon 属性 和 data-iconpos 属性 能 够 很 容易 地 使 用 自选 图 标 来 取代 系统 
的 默认 图 标 ， 并 且 能 够 设置 图 标 显示 位 置 。 如 果 把 代码 8.23 中 的 菜单 定义 更 改 为 下 面 这 一 行 ， 
那么 菜单 就 会 使 用 “+” 图 标 并 且 显示 在 左 端 : 

<select name="airport" id="airport"” data-icon="plus" data-iconpos="left"> 

菜单 中 的 图 标 允 许 出 现在 右 端 (默认 )， 或 者 出 现在 菜单 的 左 端 ， 文 字 之 上 、 文 字 之 下 等 位 
置 ， 甚 至 可 以 隐藏 菜单 文字 (data-iconpos=“notext”)， 如 图 8.32 所 示 。 


机 声 © 北京 首都 国际 机 场 © 
北京 首都 国际 机 声 
机 声 北京 首都 国际 机 场 机 声 © 
© 


图 8.32 ”图标 在 菜单 中 的 不 同 显示 位 置 
3. 菜单 分 组 


菜单 中 的 内 容 经 常 需要 按照 一 定 的 规律 被 分 为 几 个 组 。 菜 单 分 组 由 HTML 元 素 <optgroup> 
实现 。jQuery Mobile 直接 对 HTML 元 素 产 生 的 页 面 效果 进行 了 优化 ， 因 此 ， 在 编写 网 页 代码 
时 ， 并 不 需要 对 选择 菜单 中 的 分 组 做 出 特别 的 定义 。 

代码 8.24 ”菜单 分 组 


<!DOCTYPE html> 
<html> 
<head> 

<title>jQuery Mobile - UI - SelectMenu</title> 

<meta charset="utf-8" /> 

<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 

<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 

<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 

rel="stylesheet" /> 

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 

<div data-role="page" data-theme="a"> 

<div data-role="header"><h1> 选 择 菜单 </h1></div> 
<div class="ui-content" role="main"> 
<form target="#"> 
<div class="ui-field-contain"> 
<label for="airport"> 机 场 </label> 
<select name="airport" id="airport"> 
<option> 请 选择 . . .</option> 
<optgroup label=" 中 国 "> 
<option value="PEK"> 北 京 首都 国际 机 场 </option> 
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<option value="PVG"> 上 海 浦东 国际 机 场 </option> 
<option value="SHA"> 上 海 虹桥 国际 机 场 </option> 


</optgroup> 
<optgroup label=" 美 国 "> 


<option value="JFK"> 纽 约 肯 尼 迪 国际 机 场 </option> 
<option value="LGA"> 纽 约 拉 瓜 迪 亚 国 际 机 场 </option> 
<option value="LAX"> 洛 杉 矶 国际 机 场 </option> 


</optgroup> 
<optgroup label=" 加 拿 大 "> 


<option value="YYZ"> 多 伦 多 皮尔 逊 国际 机 场 </option> 
<option value="YVR"> 温 哥 华 国际 机 场 </option> 
<option value="YUL"> 蒙 特 利 尔 特 鲁 多 国际 机 场 </option> 


</optgroup> 
</select> 
</div> 
</form> 
</div> 
</div> 
</body> 
</html> 
代码 8.24 把 菜单 中 的 选项 按照 国家 , 分 为 三 组 , 每 一 组 由 
<optgroup> 元 素 界定 范围 。jQuery Mobile 将 为 分 组 以 后 的 选项 
和 分 组 标题 赋予 特定 的 样式 , 如 图 8.33 所 示 。 如 果菜 单 选 项 比 
较 多 , 超出 了 一 屏 的 显示 范围 ,jQuery Mobile 会 自动 添加 重 直 
滚动 条 ， 用 户 也 可 以 通过 拖 动 方式 达到 滚动 菜单 的 目的 。 
4. 菜单 组 合 与 排列 


菜单 组 合 也 是 网 页 设计 中 十 分 常见 的 设计 ， 比 如 饭店 的 点 
菜系 统 、 订 单 投递 设置 ， 以 及 下 面 使 用 的 航班 查询 和 订 票 系统 
中 ， 都 会 涉及 这 样 的 设计 方法 。 

菜单 组 合 实际 上 就 是 连续 出 现 的 几 个 菜单 。 为 了 使 这 些 菜 
单 在 视觉 上 形成 一 个 有 机 整体 ， 需 要 在 代码 中 使 用 <fieldset>， 
并 且 ， 非 常 重要 的 一 步 是 设置 data-role=“controlgroup” 属 性 ， 
只 有 这 样 ， 组 合 中 的 各 个 菜单 才 不 会 在 网 页 显示 时 彼此 分 离 。 
data-type 属性 用 于 设置 菜单 组 合 的 显示 方法 。 


北京 首都 国际 机 场 


上 海 浦东 国际 机 场 


上 海 虹桥 国际 机 场 


美国 


纽约 肯尼迪 国际 机 场 


纽约 拉 凡 迪 亚 国际 机 场 


8.33 ”选项 分 组 以 后 的 菜单 


代码 8.25 把 菜单 组 合 的 显示 方式 设置 为 如 图 8.34 中 的 水 平 排列 (horizontal), 我 们 也 可 以 把 


菜单 组 合 的 显示 方式 设置 为 垂直 排列 (verticaD) 。 
代码 8.25 水平 排列 的 选择 菜单 集合 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - SelectMenu</title> 


<meta charset="utf-8" /> 
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<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 


<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 


<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


</head> 
<body> 


<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 选 择 菜 单 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form target="#"> 
<fieldset data-role="controlgroup" data-type="horizontal"> 
<legend> 中 国 -> 加 拿 大 航班 </legend> 
<label for="origin"> 始 发 </label> 
<select name="origin" id="origin"> 
<option value=""> 出 发 地 </option> 
<option value="PEK"> 北 京 首都 国际 机 场 </option> 
<option value="PVG"> 上 海 浦东 国际 机 场 </option> 
<option value="CAN"> 广 州 白云 国际 机 场 </option> 
</select> 
<label for="destination"> 到 达 </label> 
<select name="destination" id="destination"> 
<option value=""> 目 的 地 </option> 
<option value="YY2Z"> 多 伦 多 皮尔 逊 国际 机 场 </option> 
<option value="YVR"> 温 哥 华 国际 机 场 </option> 
</select> 
<label for="airline"> 航 空 公司 </1label> 
<select name="airline" id="airline"> 
<option value=""> 航 空 公司 </option> 
<option value="AC"> 加 拿 大 航空 </option> 
<option value="X"> 其 他 . . .</option> 
</select> 
</fieldset> 
</form> 
</div> 
</div> 


</body> 
</html> 


当 为 一 个 网 页 设计 水 平 排列 的 菜单 组 合 时 ， 


- 定 要 注意 菜单 整体 所 需 的 最 小 宽度 。 如 果 排 


列 的 组 合 过 多 , 或 者 初始 显示 时 菜单 中 的 文字 过 长 ， 都 会 打 乱 菜单 的 排列 ， 以 至 于 对 对 页 面 总 


体 布局 造成 损害 。 因 此 ， 必 须 谨慎 使 用 水 平 排列 的 菜单 组 合 ， 或 者 仔细 设置 菜单 中 的 文字 。 
从 图 8.34 的 第 一 幅 画 面 中 可 以 看 到 , 菜单 的 初始 显示 文字 都 比较 短 , 这 既 方 便 了 标识 - 


个 


菜单 ， 又 有 利于 屏幕 布局 。 如 果 在 菜单 中 直接 显示 航空 公司 或 者 飞机 场 的 名 字 ， 文 字 过 长 ， 页 
面 布 局 就 被 破坏 了 。 
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jam webhop me 


中 国 > 加 拿 大 航班 
出 发 地 加 目的 地 加 枯 字 公司 加 出 发 地 


北京 首都 国际 机 场 


上 海 浦东 国际 机 场 


广州 白云 国际 机 场 


图 8.34 水平 排列 的 菜单 集合 的 初始 状态 和 菜单 打开 方式 


8.5.2 ”定制 菜单 


在 上 一 小 节 中 ,我 们 已 经 提 到 了 在 此 之 前 我 们 见 到 的 选择 菜单 ， 即 使 在 移动 浏览 器 上 是 以 
弹出 方式 显示 ， 但 是 在 本 质 上 ， 这 些 选 择 菜单 仍然 属于 下 拉 菜单 的 范畴 。 上 述 这 些 菜单 在 浏览 
器 中 的 显示 方式 取决 于 浏览 器 本 身 对 <select> 和 <option> 元 素 的 显示 方式 ， 而 jQuery Mobile 并 
没有 改变 那些 菜单 的 显示 方式 。 也 就 是 说 ， 以 上 菜单 的 显示 方式 被 认为 是 浏览 器 /操作 系统 本 
身 (native) 提 供 的 方式 。 通常 ，jQuery Mobile 会 对 网 页 进行 自动 样式 增强 。 对 于 一 个 选择 菜单 
来 说 ，jQuery Mobile 是 否 对 其 进行 样式 增强 ， 取 决 于 属性 data-native-menu 的 设置 。 这 个 属性 
的 默认 值 是 true, 意味 着 在 默认 情况 下 jQuery Mobile 系统 没有 被 要 求 更 改选 择 菜单 的 样式 ， 

晶 我 们 如 代码 8.26 中 那样 把 这 个 属性 的 值 设 置 为 false，jQuery Mobile 就 会 自动 地 把 选择 菜单 

的 显示 样式 更 改 为 弹出 方式 ， 如 图 8.35 所 示 。 我 们 把 data-native-menu 属性 值 为 false 的 菜单 称 

为 定制 菜单 。 定 制 菜单 还 有 一 种 特殊 情况 ， 当 菜单 中 的 选项 非常 多 时 ，jQuery Mobile 会 把 弹出 

菜单 的 显示 方式 自动 更 改 为 把 所 有 的 选项 显示 在 一 个 对 话 框 (包含 关闭 按钮 ) 中 ,如 图 8.36 所 示 。 
代码 8.26 ”定制 菜单 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - SelectMenu</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
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<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 选 择 菜单 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form target="#"> 
<div class="ui-field-contain"> 
<label for="airport"> 机 场 </label> 
<select name="airport" id="airport" 
data-native-menu="false"> 
<option value="PEK"> 北 京 首都 国际 机 场 </option> 
<option value="PVG"> 上 海 浦东 国际 机 场 </option> 
<option value="SHA"> 上 海 虹桥 国际 机 场 </option> 
<option value="CAN"> 广 州 白云 国际 机 场 </option> 
<option value="CTU"> 成 都 双流 国际 机 场 </option> 


</select> 
</div> 
</form> 
</div> 
</div> 
</body> 
</html> 
TECNSIEZTTZI TECNKIISIEPRITT 
Jam webhop me : Jam webhop me : 

上 海 浦东 国际 机 声 ss 
上 海 红 桥 国际 机 场 > 0 
广州 自 去 国际 机 声 = 
威 都 双 当 国际 机 声 
吉林 

时 龙 江 
河北 
河南 
山 革 
山西 

8.35 ”定制 (弹出 ) 菜 单 8.36 ”以 对 话 框 形式 显示 的 定制 菜单 


8.6 选择 开关 


选择 开关 (Flip Switeh) 是 一 个 只 有 两 种 状态 的 UI 组件。 一 个 开关 组 件 能 够 使 用 户 非常 方便 
地 回答 “是 ”或 “ 否 ”。 我 们 在 智能 手机 的 设置 页 面 上 看 到 大 量 的 开关 ， 用 于 启动 或 者 停止 设 
备 上 的 一 个 功能 。 在 网 页 的 设计 中 ， 常 见于 询问 是 否 需 要 移动 设备 记 住 用 户 登 录 的 用 户 名 等。 
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jQuery Mobile 有 多 种 开关 实现 方法 ， 其 中 包括 一 种 趋 于 淘汰 的 开发 方法 。 
8.6.1 常见 的 开关 编写 方法 


这 一 单元 将 介绍 通过 多 选 按 钮 (checkbox) 和 下 拉 菜 单 (<select> 和 <option>) 实 现 的 开关 组 件 。 
这 些 都 是 在 jQuery Mobile 1.4 中 推荐 的 开发 方案 。 在 这 些 设计 方法 中 ，HTML 元 素 本 身 所 形成 
的 原始 样式 已 经 荡然 无 存 ，jQuery Mobile 通过 替换 和 样式 增强 ， 使 这 些 常 规 的 HTML 元 素 形 
成 了 在 普通 网 页 中 难以 创建 的 UI 组 件 。 


1. 多 选 按钮 与 开关 


每 一 个 多 选 按钮 都 有 “已 选择 (checked)” 和 “没有 被 选择 ”两 种 状态 ， 这 两 种 状态 符合 开 
关 的 基本 要 求 ，jQuery Mobile 利用 了 多 选 按钮 的 这 一 特点 ,在 表现 样式 上 加 以 改进 ， 形 成 了 一 
个 开关 组 件 。 

代码 8.27 演示 了 一 个 最 基本 的 选择 开关 组 件 。 

代码 8.27 ”通过 多 选 按钮 创建 的 开关 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Flip Switch</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 


<div data-role="header"> 
<h1> 开 关 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form> 
<div class="ui-field-contain"> 
<label for="yes_no"> 功 能 激活 </label> 
<input type="checkbox" data-role="flipswitch" 
name="yes no" id="yes no"> 
</div> 
</form> 
</div> 
</div> 
</body> 
</html> 


运行 效果 如 图 8.37 所 示 。 在 这 段 代 码 中 ， 一 个 多 选 按钮 被 data-role="“flipswitch”* 属 性 修饰 。 
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jQuery Mobile 会 在 页 面 初始 化 过 程 中 ， 把 这 个 多 选 按 钮 “替换 ”为 一 个 开关 组 件 ， 原 始 的 多 选 
按钮 处 于 被 隐藏 的 状态 。 当 表单 向 服务 器 发 送 数据 时 , 真正 提供 数据 的 仍然 是 原始 的 多 选 按钮 ， 
用 户 通过 UI 组 件 修改 的 信息 实际 上 仍然 被 保存 在 一 个 处 于 隐藏 状态 的 多 选 按钮 中 。 


2. 开关 组 件 的 实用 定制 


-个 开关 组 件 可 以 设置 迷你 等 样式 风格 ， 此 外 ， 开 关 的 初始 状态 和 说 明文 字 对 于 一 个 实用 

网 站 来 说 是 非常 重要 的 定制 要 求 。 

-个 开关 在 默认 的 初始 显示 状态 下 表现 为 “ 关 ” 状 态 (或 者 称 为 “和 否 ” 状 态 )。 由 于 开关 的 

状态 是 与 原始 多 选 按钮 的 状态 直接 关联 的 ， 并 且 这 个 关联 由 jQuery Mobile 框架 维护 ， 当 我 们 

巴 多 选 按钮 设置 为 “已 选择 (checked)” 状 态 时 ， 网 页 上 的 开关 同样 会 被 设置 为 “ 开 ” 状 态 (或 
开关 组 件 上 面 的 文字 默认 为 On 或 者 Off， 我 们 可 以 更 改 这 些 文字 ， 甚 至 去 除 说 明文 字 。 

于 一 个 开关 拥有 两 种 状态 ， 我 们 需要 对 两 种 状态 的 文字 通过 属性 data-on-text 和 data-off-text 

分 别 进行 设置 。 

代码 8.28 演示 以 上 两 种 实用 定制 ， 实 际 效果 如 图 8.38 所 示 。 


jam webhop me i Jam webhop me 上 
开关 开关 
功能 洽 活 功能 矿 生 
on 


8.37 ”处 于 初始 默认 状态 的 基本 开关 8.38 ”开关 说 明文 字 被 修改 ， 并 且 被 设置 
为 “已 选择 ”状态 的 开关 


代码 8.28 设置 开关 说 明文 字 和 设置 初始 状态 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - UI - Flip Switch</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
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rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"><hl> 开 关 </hl></div> 
<div class="ui-content" role="main"> 
<form> 
<div class="ui-field-contain"> 
<label for="yes_no"> 功 能 激活 </label> 
<input type="checkbox" data-role="flipswitch" 
data-on-text=" 是 " data-off-text=" 否 " 
name="yes no" id="yes no" checked=""> 
</div> 
</form> 
</div> 
</div> 
</body> 
</html> 


3. 下 拉 菜 单 与 开关 


<select> 和 <option> 元 素 用 于 在 网 页 中 建立 下 拉 菜 单 。 这 两 个 元 素 提供 了 jQuery Mobile 创 
建 开 关 组 件 的 另外 一 个 选择 。<option> 元 素 本 身 就 能 够 设置 不 同 的 说 明文 字 , 不 需要 借助 jQuery 
Mobile 特有 的 属性 。 而 且 只 要 在 任何 一 个 <option> 元 素 中 设置 selected=-“ 属性 ， 就 能 决定 一 个 
开关 的 初始 显示 状态 。 

代码 8.29 实现 了 与 代码 8.28 相同 的 功能 ， 而 且 实际 显示 效果 也 与 图 8.38 相同 。 需 要 注意 
的 是 ， 虽 然 通过 多 选 按 钮 和 <select> 能 够 达到 相同 的 目的 ， 但 是 ， 由 于 实际 数据 分 别 保留 在 
<input> 元 素 和 <select> 元 素 中 ， 当 数据 向 服务 器 发 送 时 ， 应 当 注意 在 服务 器 端正 确 的 数据 接收 
为 式 。 

代码 8.29 通过 <select> 元 素 创建 的 开关 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Flip Switch</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 


rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"><h1> 开 关 </hl></div> 
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<div class="ui-content" role="main"> 
<form> 
<div class="ui-field-contain"> 
<label for="yes_no"> 功 能 激活 </label> 
<select data-role="flipswitch" 
name="yes_ no" id="yes no"> 
<option> 否 </option> 
<option selected=""> 是 </option> 
</select> 
</div> 
</form> 
</div> 
</div> 
</body> 
</html> 


8.6.2 ”滑动 条 开关 


从 外 形 上 看 ， 一 个 开关 组 件 很 像 一 个 缩小 版 的 滑动 条 ， 而 且 它们 在 滑动 过 程 中 的 动画 效果 
也 十 分 相似 。 在 jQuery Mobile 1.4 之 前 ， 开 关 组 件 通常 是 通过 滑动 条 实现 的 。 但 是 ， 随 着 滑 
动 条 开发 方法 的 改进 ， 通 过 滑动 条 实现 开关 组 件 的 方式 已 经 趋 于 淘汰 ， 并 且 在 新 的 网 站 开发 中 
建议 不 再 使 用 。 由 于 滑动 条 开关 曾经 大 量 使 用 ， 这 里 做 一 个 简要 介绍 。 
滑动 条 开关 具有 几 个 要 素 : 首先 ， 这 个 组 件 在 分 类 上 属于 滑动 条 (data-role=“slider)， 读 者 
或 许 已 经 意识 到 一 个 问题 , 在 本 章 8.1 节 中 ,我 们 从 来 没有 使 用 过 data-role=“slider" 这 样 的 方法 。 
data-role=“slider" 已 经 建议 不 再 使 用 ，jQuery Mobile 已 经 采用 更 为 贴近 原始 HTML 的 方法 来 实 
现 相 同 的 功能 。 这 里 的 用 法 来 源 于 jQuery Mobile 的 早期 版 本 ， 其 次 ， 滑 动 条 开关 由 <select> 元 
素 以 及 两 个 <option> 元 素 组 成 。 
代码 8.30 与 代码 8.29 的 差别 非常 微小 ， 但 这 两 段 代码 却 分 别 代 表 了 当前 建议 的 开发 方式 
和 趋 于 淘汰 的 开发 方式 。 
代码 8.30 ”滑动 条 开关 
<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI - Flip Switch</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"><h1> 开 关 </h1l></div> 
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<div class="ui-content" role="main"> 
<form> 
<div class="ui-field-contain"> 
<label for="yes_no"> 功 能 激活 </label> 
<select data-role="slider" name="yes no" id="yes no"> 
<option> 否 </option> 
<option> 是 </option> 
</select> 
</div> 
</form> 
</div> 
</div> 
</body> 
</html> 


读者 需要 仔细 思考 引起 这 种 变化 的 深层 原因 。 

运行 代码 3.30, 实际 效果 与 图 3.38 非常 相似 。 如 果 仔 细 比 较 新 旧 两 种 编程 方式 在 浏览 器 中 
的 显示 效果 ， 就 会 发 现 ， 滑 动 条 开关 具有 一 个 滑动 条 特有 的 滑 块 ， 而 8.6.1 小 节 中 的 实例 则 不 
具备 相同 表现 样式 的 “ 滑 块 ”。 


8.7 本 章 习 题 


编程 题 


(1) 编写 一 个 用 于 调节 灰 度 的 滑动 条 。 当 移动 滑 块 位 置 时 ， 测 试 区 的 背景 色 在 黑色 与 白色 
之 间 相 应 调整 ， 如 图 8.39 所 示 。 


jqm webhop.melexerc 去 攻 <-cas ] jqm webhop.melexerd 去 莉 soose  ]】 


清 动 条 滑动 条 
sl 
39 图 加 207 这 
后 器 国 - 和 加 


图 8.39 题 (1) 图 
(2) 编写 一 个 带 有 搜索 功能 的 景点 列表 视图 ， 如 图 8.40 所 示 。 
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列表 视图 列表 视图 
Q 故宫 x Q 湖 
北京 故宫 © 杭州 西湖 © 
沈阳 故宫 © 扬州 瘦 西 湖 © 
be 避 于 - 和 已 国 - 


图 8.40 题 (2) 图 

(3) 设计 一 个 带 有 左右 两 个 面板 的 网 页 。 左 面板 采用 “ 推 ”(push) 的 打开 方式 ， 右 面板 采 
用 “覆盖 ”(overlay) 的 打开 方式 。 每 一 个 面板 上 都 含有 一 个 用 于 关闭 当前 面板 的 按钮 。 下 面 两 
幅 画面 分 别 表示 当 左右 两 个 面板 打开 时 的 情形 ， 如 图 8.41 所 示 。 注 意 ， 网 页 被 面板 遮盖 以 后 的 
剩余 部 分 所 表示 的 push 和 overlay 打开 方式 。 


jamwebhopmelexerd 交情 Goose | jamwebhopmaleerd 雁 国 oonle 】 
面板 1 面板 2 


关闭 面板 | 关闭 面板 


所 
打 | 的 


和 已 画 - 和 时 


图 8.41 题 (3) 图 
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吊 9 章 
jQuery Mobile 的 样式 定制 


本 章 导读 : 


对 jQuery Mobile 网 站 来 说 ,其 样式 是 通过 jQuery Mobile 框架 本 身 的 样式 系统 
和 网 站 设计 者 另行 开发 的 CSS 实现 的 。 

jQuery Mobile 框架 的 样式 系统 也 是 由 一 套 完 整 的 CSS 定义 实现 的 ， 其 中 包括 
框架 自 带 的 样式 , 也 包括 由 设计 者 自行 定义 的 样式 . 因此 ,jQuery Mobile 网 站 的 样 
式 从 本 质 上 是 由 多 套 CSS 规则 共同 作用 的 结果 。 

本 章 将 重点 介绍 jQuery Mobile 的 样式 系统 的 使 用 和 定制 ， 以 及 如 何在 网 站 开 
发 过 程 中 临时 修改 一 个 特定 样式 的 方法 。 通 过 本 章 的 学 习 ， 读 者 将 了 解 利用 
ThemeRoller 工具 定制 样式 系统 的 方法 ， 并 且 通 过 几 个 典型 的 实例 ， 来 了 解 在 样式 
系统 之 外 的 进一步 定制 方法 。 
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9.1 jQuery Mobile 主 题 样 式 系统 简介 


本 书 在 前 几 章 ， 已 经 多 次 使 用 了 jQuery Mobile 的 样式 系统 对 网 页 进行 样式 定制 。 定 制 一 
个 页 面 的 样式 或 者 定制 页 面 中 某 一 个 UI 组 件 的 样式 时 ， 可 以 通过 样式 定制 属性 data-theme 来 
完成 。 也 有 一 些 UI 组 件 除 了 data-theme 属性 外 ， 还 拥有 data-content-theme( 可 收 放 组 件 )、 
data-overlay-theme( 对 话 框 、 页 面 、 弹 出 框 、 选 择 菜 单 )、data-track-theme( 滑 动 条 、 选 择 开 关 )、 
data-count-theme、data-divider-theme、data-filter-theme、data-header-theme、data-split-theme( 列 
表 视 图 )、data-back-btn-theme( 工 具 栏 ) 等 。 以 上 这 些 属性 的 属性 值 都 是 jQuery Mobile 的 主题 样 
本 (swatch)。 


9.1.1 主题 系统 


1. 主题 和 样本 


到 目前 为 止 ， 本 书 已 经 使 用 了 两 套 样式 主题 。 其 中 最 常用 的 一 套 是 jQuery Mobile 1.4 自 带 
的 样式 ， 其 中 包含 了 浅 色 样本 a 和 深 色 样 本 b。 

另外 一 套 样式 我 们 只 在 少量 实例 中 用 到 ,我 们 称 这 套 样 式 为 经 典 样式 。 经典 样 式 包 括 了 从 
a 到 e， 一 共 5 个 样本 ， 这 5 个 样本 与 jQuery Mobile 1.3 系统 中 自 带 的 样式 一 致 。 

样式 系统 由 包含 若干 样 本 的 样式 主题 组 成 。 网 站 开发 人 员 可 以 使 用 jQuery Mobile 框架 自 
带 的 样式 或 者 使 用 自 定义 的 样式 。 


2. 样本 
当选 定 了 一 套 样式 以 后 ， 在 网 页 代码 中 ， 与 我 们 直接 
打交道 是 样本 。 


我 们 把 以 字母 为 代表 的 样本 赋予 一 个 页 面 、 页 面 上 的 
页 头 和 页 尾 、 一 个 UI 组 件 ， 或 者 组 件 的 某 一 个 组 成 部 分 。 
样本 正如 前 面 所 说 ，data-theme 和 其 他 相关 属性 的 属性 值 
是 样本 名 称 。jQuery Mobile 采用 字母 a~z 作为 样本 名 。 因 
此 ，jQuery Mobile 的 一 套 样式 在 正常 情况 下 最 多 能 够 拥有 
26 个 不 同 的 样本 (技术 上 可 以 做 到 超过 26 个 样本 )。 

每 一 个 样本 给 开发 人 员 最 直观 的 体验 是 定义 了 一 套 颜 
色 方 案 ， 这 包括 了 jQuery Mobile 1.4 自 带 的 浅 色 样本 和 深 
色 样 本 ， 或 者 经 典 样式 中 5 个 不 同样 本 的 不 同色 彩 。 一 个 
样本 还 包含 了 大 量 的 信息 ， 包 括 字体 、 边 角 的 弧度 、 背 景 
渐变 效果 、 阴 影 、 图 标 背 景 ， 以 及 按钮 按 下 后 的 动态 变化 
等 。 每 一 个 样本 定义 的 一 套 颜 色 方案 并 不 意味 着 一 个 样本 
只 有 一 种 颜色 ， 而 是 一 个 样本 应 该 定义 一 种 与 其 他 样本 彼 
此 区 别 的 主 色调 。 图 9.1 是 一 个 样式 样本 的 示意 图 。 图 91 一 个 样式 样本 
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在 如 图 9.1 所 示 的 示意 图 中 ， 一 个 样本 使 用 了 多 种 颜色 ， 这 些 颜色 分 别 作用 在 网 页 中 不 同 
的 组 成 部 分 。 图 中 的 颜色 反差 比较 大 ， 这 是 为 了 在 黑白 印刷 的 书 上 便于 辨别 的 目的 ， 在 实际 网 
站 中 ， 一 个 样本 中 的 颜色 方案 设计 牵涉 了 美观 、 实 用 、 企 业 或 商品 的 标志 色 ， 甚 至 是 无 障碍 设 
计 等 多 方面 的 考虑 。jQuery Mobile 对 于 每 一 个 样本 中 的 颜色 方案 进行 了 归 类 。 

从 图 9.1 中 可 以 看 出 ,页 头 和 列表 视图 的 表 头 使 用 了 同样 的 颜色 ,UI 组 件 的 背景 与 输入 字 
段 的 背景 色相 同 。 网 页 的 背景 、 按 钮 和 链接 各 自 使 用 了 单独 的 颜色 。 这 样 的 色彩 分 组 能 够 满足 
通常 的 设计 要 求 ， 如 果 需 要 ， 网 页 开发 过 程 中 可 以 在 样本 的 基础 上 对 某 一 个 样式 (包括 颜色 ) 进 
行 特殊 的 设置 。 

网 说 明 : 无 障碍 设计 是 现代 网 站 设计 的 重要 一 环 。 本 书 第 2 章 已 经 介绍 了 在 HTML 5 中 使 
用 WAI-ARIA 使 网 站 能 够 与 屏幕 阅读 器 相 适应 。 色 彩 的 无 障碍 设计 也 是 网 站 整 
体 设 计 的 一 部 分 。 色 彩 设计 包括 了 颜色 对 比 度 、 前 景 与 背景 的 对 比 ， 以 及 关于 色 
讶 用 户 的 特殊 需要 等 多 个 方面 。 读 者 可 以 参考 明尼苏达 大 学 网 站 有 关 Web 设计 
中 与 色彩 无 障碍 设计 相关 的 术语 与 测试 工具 的 介绍 ， 网 址 是 : 
http://accessibility.umn.edu/color-and-contrast-414.html 


9.1.2 样本 定义 的 方法 


不 是 每 一 个 网 站 设计 人 员 都 必须 理解 样本 在 CSS 文件 中 的 定义 方法 ， 对 这 些 方法 的 大 致 
了 解 ， 将 有 助 于 我 们 设计 自己 的 样式 主题 。 
从 文件 的 组 织 结构 角度 来 看 ，jQuery Mobile 框架 包含 了 如 图 9.2 所 示 的 许多 CSS 文件 。 


jquery.mobile .icons-1.4.2,min.css 
jquery.mobile,inline-png-1,4,2,css 
jquery.mobile.inline-png-1 ,4,2,min,css 
[$jquery.mobile inline-svg-1,4,2,css 
jquery.mobile.inline-svg-1.4.2.min.css 
jquery. mobile,structure-1,4,2,css 
回 jiquery. mobile-1.4,2,min,map jquery.mobile.structure-1,4,2,min,css 
浪 jquery, mobile,external-png-1,4,2,css 让 guery,mobile 


jquery, mobile,external-png-1.4,2.min,css jquery, mobile, et 1.4,2.min.css 
jquery, mobile,icons-1,4,2,css 


9.2 定义 了 jQuery Mobile 样 式 主题 的 CSS 文 件 


我 们 在 实例 中 用 到 了 其 中 的 一 个 jquery.mobile-1.4.2.css( 或 者 文件 名 中 带 有 min 字样 的 压缩 
版 本 )， 同 时 ， 我 们 还 能 从 同一 个 目录 下 找到 jquery.mobile.theme-1.4.2.css( 或 者 这 个 文件 对 应 的 
压缩 版 本 )。 

jquery.mobile-1.4.2.css 包含 了 jQuery Mobile 框架 本 身 所 有 的 CSS， 其 中 包括 了 样式 主题 ， 
而 jquery.mobile.theme-1.4.2.css 仅仅 包含 了 样式 主题 部 分 。 

也 就 是 说 , 我 们 在 实例 中 所 用 的 jquery.mobile-1.4.2.css 是 一 个 CSS 全 集 ， 而 样式 定义 文件 
jquery.mobile.theme-1.4.2.css 是 它 的 一 个 子 集 。 在 我 们 以 前 所 见 的 实例 中 , 使 用 了 jQuery Mobile 
的 CSS 全 集 ， 因 此 ， 并 不 需要 加 载 图 9.2 中 见 到 的 其 他 CSS 文件 。 

打开 jquery.mobile.theme-1.4.2.css， 我 们 能 够 发 现 样式 主题 由 如 图 9.3 所 示 3 个 部 分 组 成 : 
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Globals( 全 局 )、Swatches( 样 本 ) 和 Structure( 结 构 )。 每 一 个 的 主要 部 分 要 被 分 为 很 多 更 具体 的 部 
分 ， 例 如 全 局 样式 就 包括 了 字体 、 普 通 按钮 、 图 标 按钮 、 阴 影 、 单 选 与 多 选 按钮 样式 ， 以 及 图 
标 显示 方式 、 备 选 图 标 显示 方式 等 。 样 本 部 分 逐一 定义 了 jQuery Mobile 框架 自 带 的 样本 ， 比 
如 jQuery Mobile 的 a 和 b 样本 定义 。 结 构 部 分 定义 了 一 些 与 样式 主题 相关 但 又 属于 组 件 结构 
的 样式 (主要 的 结构 定义 在 jquery.mobile.structure-1.4.2.css 中 ,或 者 在 CSS 全 集 文 件 中 也 可 以 找 
到 ， 这 里 不 做 介绍 )。 


12 

3 /* 有 加/ 

14 昂 / Font 

150 
16 日 hml{ 

17 font-size: 100%; 
neg) 

19 body, 

20 input, 

21 Select 

22 textarea 

23 button 

24° 日 .ui-bcn{《 


25 font-size: lem; 
line-height: 1.3; 


218 ui- ’ 

219 .ui-page-cheme-a .ui-bar-inherit, 

220 html .ui-bar-a .ui-bar-inherit, 

221 html .ui-body-a .ui-bar-inherit, 

222 html body .ui-group-theme-a .ui-bar-inherit { 


223 background-oolor: Weg9e9e9 /*(a-bar-background-color) */ 
224 border-oolor: $ddd /*{a-bar-border}*/; 

225 color: #333 /*{a-bar-golor} "/; 

226 text-shadow: 0 /*{a-bar-shadow-x})*/ 1px /*{a-bar-shadow-y}*/ 0 / 
227 font-weight: bold; 


538 

539 

540 

541 “-------------------------------------------------------------------- 
542 Wi-disabled del abled not supported by I 
543 .ui-disabled, 

544 ui-state-disabled, 

545 button[disabled] , 

S46 日 .ui-selecc .ui-btn.ui-state-disabled { 

547 filter: Alpha(Opacity=30); 

546 opacity: .3; 

549 cursor: default !important; 

550 pointer-events: none; 

551 } 


552 FI/* Focus state outline 


9.3 jQuery Mobile 在 样式 主题 定义 中 的 3 个 主要 部 分 


jQuery Mobile 在 样式 主题 的 定义 上 结构 比较 清晰 ， 只 要 熟悉 CSS 编程 ， 手 工 修改 已 有 的 
样本 , 或 者 复制 一 个 已 有 的 样本 作为 模板 , 并 在 此 基础 上 创建 一 个 新 的 样本 , 都 是 能 够 做 到 的 。 
网 站 开发 人 员 可 以 按照 自己 的 需要 来 设计 自己 的 样式 主题 。 


336 < 


第 9 瘟 jQuery Mobile 的 样式 定制 


9.2 使 用 第 三 方 样式 主题 


我 们 从 网 上 可 以 找到 很 多 现成 的 样式 主题 。 在 决定 直接 利用 这 些 样式 之 前 ， 有 几 个 问题 必 
须 加 以 考虑 。 

(1) 版 本 兼容 性 

jQuery 体系 包括 了 jQuery UI 和 jQuery Mobile， 这 两 个 框架 都 是 建立 在 HTML 5、CSS 3， 
以 及 JavaScript 之 上 的 ， 并 且 同 样 依赖 于 jQuery， 但是， 这 两 者 在 设计 上 出 发 点 不 同 ， 因 此 ， 
应 该 首先 确认 一 个 定制 样式 是 为 jQuery Mobile 设计 的 。 其 次 ， 即 使 一 套 样式 主题 是 为 jQuery 
Mobile 设计 的 ， 仍 然 需要 确认 这 套 样式 兼容 的 jQuery Mobile 版 本 。 比 如 ，jQuery Mobile 1.3 
和 1.4 依赖 的 jQuery 版 本 不 同 ， 有 一 些 jQuery API 在 新 版 本 中 已 经 发 生 了 变化 ， 而 且 ,， 两 者 对 
于 图 标 等 的 显示 方法 在 内 部 实现 上 有 很 大 的 不 同 。 这 些 变化 造成 了 为 jQuery Mobile 1.3 设计 的 
样式 并 不 适用 于 jQuery Mobile 1.4。 

(2) 业务 需求 

通常 ， 在 商业 网 站 设计 过 程 中 ， 业 务 部 门 或 者 客户 会 提出 非常 具体 的 用 户 界面 要 求 。 在 需 
求 分 析 与 设计 阶段 ， 把 这 些 需 求 转化 成 与 样式 主题 相 匹 配 的 需求 与 设计 文档 。 在 这 个 阶段 中 ， 
我 们 可 以 评估 一 个 现成 的 定制 样式 是 否 满足 业务 需求 , 或 者 对 现 有 的 样式 做 少量 修改 ， 以 满足 
业务 需求 的 可 能 性 。 

(3) 可 扩展 性 

当 正 在 测试 一 个 第 三 方 的 样式 主题 时 ， 应 该 同时 检查 这 个 样式 的 源 代码 。 这 是 因为 ,一 些 
样式 主题 虽然 能 够 与 当前 版 本 的 jQuery Mobile 协同 工作 ， 但是， 这 些 样式 是 建立 在 一 个 广义 
的 “样式 主题 ”概念 之 上 的 。 这 些 软件 模块 在 使 用 上 并 不 遵从 jQuery Mobile 的 编程 模式 ， 也 
无 法 导入 到 ThemeRoller 工具 进行 进一步 的 修改 。 因 此 ， 需 要 仔细 评估 网 站 在 将 来 业务 需求 变 
化 或 者 网 站 升级 方面 所 面临 的 样式 主题 无 法 升级 的 风险 。 

(4) 版 权 与 授权 

每 一 个 可 用 于 商业 目的 的 软件 都 伴随 着 一 个 许可 证 。 所 有 的 开发 人 员 都 应 当 尊 重 软件 作者 
的 版 权 。 本 书 所 涉及 的 软件 都 是 以 开源 方式 提供 的 ， 大 多 数 采 用 了 常见 的 MIT 许 可 证 ”授权 方 
式 。 这 种 授权 方式 提供 了 开发 人 员 在 商业 项 目 中 免费 使 用 与 分 发 的 权利 , 但 是 有 一 些 软 件 模块 
有 额外 的 版 权 要 求 ， 比 如 公共 版 权 (copylefb 等 的 附加 条 件 。 在 决定 网 站 设计 方案 的 阶段 ， 明 确 
第 三 方 软件 模块 的 授权 方式 在 商业 开发 活动 中 十 分 重要 。 

下 面 以 两 个 与 jQuery Mobile 1.4 兼容 的 开源 样式 主题 为 例 ， 进一步 介绍 这 一 类 第 三 方 软件 
的 使 用 方法 与 制约 条 件 。 本 书 作 者 对 这 些 第 三 方 软件 只 做 技术 上 的 讨论 。 


9.2.1 jQuery Mobile Flat UI Theme 
jQuery Mobile Flat UI Theme? 就 像 它 的 名 字 ， 是 一 套 为 jQuery Mobile 设 计 的 具有 扁平 化 设 


@ MIT License: http://en.wikipedia.org/wiki/MIT License (维基 百科 )。 
@ jQuery Mobile Flat UI Theme 项 目 网 站 : https://github.com/ququplay/jquery-mobile-flat-ui-theme。 
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计 特点 的 用 户 界 面 。 扁 平 化 设计 的 流行 离 不 开 iOS 对 这 种 用 户 界 面 设计 理念 的 推崇 。 它 握 弃 了 
拟 物化 的 3D 效 果 ， 采 用 的 是 无 阴影 、 无 色彩 渐变 的 非 立 体感 设计 。 这 样 的 界面 设计 在 iPhone 
或 者 Windows 8 系统 中 非常 多 见 。 但是， 这样 的 UI 设计 是 否 能 够 满足 UX( 人 际 交 互 ) 设 计 要 求 并 
且 长 久 流行 ,仍然 是 一 个 很 大 的 争议 。jQuery Mobile Flat UI Theme 采 用 WTFPL? 授 权 方式 。 在 
这 种 授权 方式 下 ， 版 权 方 对 软件 的 使 用 、 修 改 、 分 发 、 销 售 等 一 切 自 用 或 商业 行为 不 做 限制 。 

使 用 jQuery Mobile Flat UI Theme 样式 主题 的 时 候 ， 需 要 在 网 页 代码 中 加 入 jquery. 
mobile.flatui.css 或 者 它 的 压缩 版 本 (min)。 在 网 页 中 的 某 一 个 UI 组 件 声 明 样本 的 方法 遵循 了 
jQuery Mobile 样式 声明 的 通用 方法 。 

图 9.4 演示 了 通过 jQuery Mobile Flat UI Theme 实现 的 扁平 化 设计 用 户 界 面 。 
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9.4 ”扁平 样式 实例 


图 9.4 中 ， 第 一 幅 画 面 中 的 7 个 按钮 分 别 使 用 了 jQuery Mobile Flat UI Theme 中 的 7 个 样 
本 (a~g)。 下 面 是 分 别 为 按钮 、 选 择 开 关 ， 以 及 区 间 滑 动 条 设置 样本 的 典型 代码 : 
<!-- 按钮 --> 


<a href="#" data-role="button" data-icon="gear" data-theme="a">A</a> 


<!== 选择 开关 =-> 
<label for="yes_no"> 功 能 激活 </label> 
<input type="checkbox" data-role="flipswitch" name="yes no" id="yes_ no" 


data-theme="e"> 


<!-- 区 间 滑 动 条 --> 
<div data-role="rangeslider" data-theme="d" data-track-theme="e"> 
<label for="min year"> 年 </label> 
<input type="range" name="min year" id="min year" value="1996" 
min="1980" max="2020"> 
<label for="max year"> 年 </label> 


@ WTIFPL: http://zh.wikipedia.org/wiki/WTFPL (维基 百科 )。 
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<input type="range" name="max year" id="max year" value="2012" 
min="1980" max="2020"> 
</div> 
上 述 代码 都 是 改编 自 本 书 第 6 章 到 第 8 章 的 实例 。 这 些 代 码 都 是 采用 了 jQuery Mobile 设 
置 样式 样本 的 通用 方法 ,代码 本 身 没有 特别 之 处 。 但是， 如 果 我 们 要 实现 图 9.4 中 的 显示 效果 ， 
每 一 个 网 页 文件 中 链接 外 部 CSS 的 方法 却 有 一 点 不 同 。 
实现 上 述 3 幅 画 面 的 网 页 都 有 下 面 一 段 共同 的 代码 : 
<head> 
<title>jQuery Mobile - theme</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="themes/jquery-mobile-flat-ui-theme-master/generated/ 
jquery.mobile.flatui.css" rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
从 上 面 这 段 代码 中 可 以 看 到 ， 当 一 个 网 页 使 用 jQuery Mobile Flat UI Theme 样式 主题 时 ， 
只 需要 引用 这 套 定制 样式 所 提供 的 CSS 文件 , 而 不 需要 引用 jQuery Mobile 框架 本 身 的 CSS 文 
件 。 如果 更 深入 地 的 研究 jquery.mobile.flatui.css， 就 会 发 现 jQuery Mobile Flat UI Theme 提供 的 
CSS 文件 已 经 包含 了 jQuery Mobile 框架 需要 的 基本 结构 和 图 标 等 ， 而 且 有 的 局 部 CSS 定义 是 
与 jQuery Mobile 相互 冲突 的 。 
因此 ,我 们 可 以 认为 jQuery Mobile Flat UI Theme 的 CSS 文件 是 jQuery Mobile 的 一 个 变形 ， 
而 不 是 一 个 纯粹 的 样式 扩展 。 一 个 单纯 的 样式 定制 是 一 个 CSS 文件 ， 在 使 用 时 ， 应 该 链接 在 
jQuery Mobile 的 CSS 全 集 文件 (如 jquery.mobile-1.4.2.css) 之 后 ， 用 以 取代 jQuery Mobile 框架 
自 带 的 样本 a 和 Pb。 或 者 不 引用 jQuery Mobile 的 CSS 全 集 文件 ， 分 别 单独 引用 jQuery Mobile 
的 结构 、 图 标 等 CSS 文件 ， 外 加 定制 样式 所 提供 的 CSS 文件 。 
在 选用 jQuery Mobile Flat UI Theme 时 ， 还 需要 注意 一 个 问题 。jQuery Mobile 1.4 相对 于 
1.3 的 一 个 变化 在 于 新 版 本 的 图 标 首选 SVG( 同 时 支持 PNG)， 而 在 旧版 本 中 ， 使 用 PNG。 
jQuery Mobile Flat UI Theme 在 改写 jQuery Mobile 1.4 CSS 文件 的 时 候 保留 了 jQuery 
Mobile 1.4 的 图 标 在 网 页 代码 中 的 编程 方式 ， 但 是 只 提供 了 PNG 图 标 。 


9.2.2 nativeDroid 


nativeDroid? 是 一 套 模 拟 Android 4.x 用 户 界 面 样式 的 jQuery Mobile 样 式 扩 展 。 本 书写 作 期 
间 , nativeDroid 发 布 的 0.27 版 本 需要 运行 在 jQuery Mobile 1.4.2 环境 下 。nativeDroid 软 件 作 者 没 
有 直接 使 用 任何 一 种 开源 许可 证 ,而 是 直接 授权 用 户 可 以 在 为 客户 开发 的 商业 项 目 中 使 用 , 但 
是 必须 在 项 目 中 提供 一 个 可 见 的 链接 (http://nativedroid.godesign.ch/) 指 向 项 目 网 站 。 如 果 使 用 者 
不 想 在 项 目 中 出 现 这 个 链接 ， 软 件 作 者 要 求 使 用 者 向 该 软件 项 目 捐款 15 美元 。 同 时 ， 软 件 作 
者 不 允许 再 以 项 目 为 模板 销售 该 项 目 。 


O@ nativeDroid 项 目 网 站 : http://nativedroid.godesign.ch/。 
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nativeDroid 提供 了 基于 5 种 颜色 的 样本 : 蓝 、 绿 、 紫 、 红 、 黄 。 另 外 提供 了 两 种 表现 样式 : 
深 色 和 浅 色 。 每 一 个 样本 和 表现 样式 都 有 一 个 单独 的 CSS 文件 。nativeDroid 把 所 有 的 样式 定 
制 都 统一 使 用 了 样本 代号 b。 因 此 ， 在 网 页 代码 中 ， 只 会 出 现 一 种 样式 样板 。 如 果 需 要 使 用 别 
的 主题 颜色 ， 或 者 在 深 色 和 浅 色 表现 样式 之 间 切 换 ， 就 必须 链接 不 同 的 CSS 文件 。 

下 面 通 过 一 个 简单 的 网 页 ， 来 说 明 设置 网 页 工具 栏 样式 的 方法 。 


代码 9.1 nativeDroid 样 式 的 应 用 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - theme</title> 
<meta charset="utf-8" /> 
<script sr js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link rel="stylesheet" 
href="themes/nativeDroid-master/css/jquerymobile.nativedroid.css"/> 
<link rel="stylesheet" 
href="themes/nativeDroid-master/css/ 
jquerymobile.nativedroid.light.css"/> 
<link rel="stylesheet" 
href="themes/nativeDroid-master/css/ 
jquerymobile.nativedroid.color.green.css" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 


<body> 
<div data-role="page" data-theme="b"> 
<div data-role="header" data-position="fixed" 
data-tap-toggle="false" data-theme="b"> 
<hl>nativeDroid</h1l> 
</div> 
<div class="ui-content" role="main"> 
<div class="inset"> 
本 网 站 使 用 了 <a href="http://nativedroid.godesign.ch/" 
data-ajax= “false”>nativeDroid</a> 样 式 。 
</div> 
</div> 
<div data-role="footer" data-position="fixed" 
data-tap-toggle="false" data-theme="b"> 
<div data-role="navbar"> 
<ul> 
<li><a href="#" data-icon="home™" 
data-iconpos="top"> 主 页 </a></1i> 


<li><a href="#" data-icon="mail" 
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data-iconpos="top"> 联 系 </a></1i> 


<li><a href="#" data-icon=" 


"search” 


data-iconpos="top"> 帮 助 </a></1i> 


</ul> 
</div> 
</div> 
</div> 
</body> 
</html> 


代码 9.1 从 网 页 内 容 上 与 本 书 先前 介绍 的 jQuery 


Mobile 样式 设置 的 标准 编程 方法 一 致 ,但 


是 ， 由 于 nativeDroid 的 特点 ， 所 有 需要 设置 样式 的 UI 组 件 的 data-theme 属性 值 都 应 该 是 b。 
从 网 页 的 <head> 部 分 可 以 看 到 ， 除 了 加 载 jQuery 和 jQuery Mobile 以 外 ，nativeDroid 还 需要 加 
载 3 个 CSS 文件 ,其 中 包括 必须 加 载 的 jquerymobile.nativedroid.css， 从 深 色 样式 或 者 浅 色 样式 


中 选取 一 个 CSS 文件 ， 以 及 从 5 中 主题 颜色 中 选取 


-个 CSS 文件 。 


代码 9.1 在 浏览 器 中 显示 的 效果 如 图 9.5 所 示 。 如 果 把 代码 9.1 中 的 样式 替换 为 深 色 , 并 且 
把 主题 样本 替换 为 黄色 ， 那 么 ， 网 页 就 会 变 成 如 图 9.6 所 示 的 情形 。 
> PTET ETEEEEEEEEEEEZIEY 


jam.webhop me 


jam. webhop me 


从 图 9.5 和 9.6 中 ， 读 者 会 很 容易 注意 到 ， 网 页 正文 中 的 文字 与 页 头 部 分 之 间 没 有 间 际 ， 


这 与 我 们 先前 见 到 的 网 页 在 布局 上 面 有 一 点 差 


造成 这 种 现象 的 原因 ， 是 nativeDroid 对 jQuery Mobile 的 页 面 结 构 做 了 一 些 修改 ， 同 样 ， 


在 页 头 部 分 ， 我 们 也 可 以 看 到 ， 即 使 页 面 的 标题 使 用 - 


『 jQuery Mobile 网 页 的 标准 编程 方法 ， 


但 是 ， 标 题 文字 比 jQuery Mobile 默认 的 字体 大 ， 而 且 


并 不 水 平 居中 。 


在 Chrome 浏览 器 中 调试 代码 ， 可 以 看 到 图 9.7 中 鼠标 所 指 的 CSS 语句 。 


正 是 由 于 nativeDroid 对 网 页 内 容 部 分 padding 的 重 


: 义 ， 原 有 的 间隙 被 去 除了 。 读 者 可 


以 自行 在 jquerymobile.nativedroid.css 中 找到 相关 的 CSS 定义 进行 修正 ， 但 是 ， 在 修改 之 前 ， 


最 好 能 够 了 解 该 样式 设计 者 的 设计 意图 。 
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图 9.7 网 页 页 头 与 正文 内 容 过 于 接近 的 原因 分 析 


9.3 ThemeRoller 工 具 


在 9.2 节 中 ， 介 绍 了 两 套 定制 样本 实例 。 这 两 套 定制 样本 从 某 种 程度 上 来 说 ， 是 对 jQuery 
Mobile 样式 的 深度 定制 。 除 了 定义 新 的 样本 (swatch) 以 外 ， 还 对 jQuery Mobile 页 面 的 结构 和 布 
局 做 一 定 的 修改 。 但 是 , 这 两 套 定制 样式 都 不 能 直接 导入 到 jQuery Mobile 的 ThemeRoller 工具 
中 ， 如 果 想 要 修改 ， 则 需要 手工 修改 CSS 源 代码 。 这 一 节 介绍 利用 ThemeRoller 工具 的 图 形 化 
界面 来 创建 全 新 的 或 者 扩展 jQuery Mobile 已 有 的 样本 。 新 的 样式 定制 将 很 容易 地 重新 导入 到 
ThemeRoller 工具 中 ， 便 于 将 来 修改 和 进一步 扩展 。 


9.3.1 ThemeRoller 的 基本 操作 


ThemeRoller 是 一 个 在 线 样式 主题 定制 工具 , 由 jQuery Mobile 提供 。 使 用 者 可 以 通过 jQuery 
Mobile 网 站 主 菜单 上 的 Themes 进入 ThemeRoller， 如 图 9.8 所 示 ， 网 站 将 显示 ThemeRoller 欢 
迎 界面 ， 如 图 9.9 所 示 。 

欢迎 界面 提示 使 用 者 ThemeRoller 能 够 最 多 创建 26 个 样本 ， 并 且 能 够 导入 已 有 的 样式 定 
义 , 并 通过 ThemeRoller 工具 对 已 有 的 样式 定义 进行 升级 。 点 击 欢迎 页 面 上 的 Get Rolling 按钮 ， 
进入 ThemeRoller 工具 用 户 界 面 。 
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9.8 ”从 jQuery Mobile 网 站 的 主 菜单 Themes 进 入 ThemeRoller 
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9.9 ThemeRoller 欢 迎 界面 


1. ThemeRoller 功 能 按钮 


ThemeRoller 用 户 界面 由 一 个 主页 面 和 一 些 弹出 窗口 组 成 。 主 页 面 分 左右 两 部 分 。 右 边 的 
顶部 包含 了 ThemeRoller 用 于 配置 和 导入 /导出 等 主要 功能 的 按钮 ， 如 图 9.10 所 示 。 
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9.10 TheemRoller 的 主要 功能 
不 同 版 本 的 jQuery Mobile 是 建立 在 不 同 的 jQuery 版 本 基 


础 之 上 的 ， 并 且 包 括 图 标 等 组 件 ， 在 显示 方式 上 采用 了 不 同 Ve Ls 

的 CSS。 因 此 ,每 一 个 主要 版 本 所 采用 样式 主题 CSS 的 兼容 
性 是 不 能 保证 的 。 在 开始 创建 一 个 新 的 样式 时 ， 开 发 者 必须 132 
选择 与 网 站 中 使 用 的 jQuery Mobile 版 本 相 匹 配 的 样式 主题 CE 

版 本 。 图 9.11 显示 了 当 版 本 选择 下 拉 菜单 打开 时 的 情景 ， 3 


ThemeRoller 默认 为 当前 版 本 1.4.x。 

如 果 选 择 一 个 其 他 版 本 的 jQuery Mobile，ThemeRoller 9.11 jQuery Mobile 版 本 选择 
会 立刻 转向 相应 版 本 的 工具 页 面 。 

2. 导入 窗口 


点 击 ThemeRoller 网 页 顶部 的 Import 按钮 ( 见 图 9.10)， 屏 幕 上 将 弹出 导入 窗口 。 当 导入 窗 
口 第 一 次 打开 时 ， 窗 口中 没有 任何 内 容 。 使 用 者 可 以 复制 一 个 早先 定制 的 ， 未 经 压缩 的 jQuery 
Mobile 样式 主题 CSS 文件 ， 并 粘贴 到 导入 窗口 中 。 

jQuery Mobile 1.4 框架 本 身 带 有 两 个 样本 a 和 b。 如 果 需 要 保留 这 两 个 样本 ， 并 在 这 两 个 
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样本 的 基础 上 开发 样 c~z， 就 需要 导入 jQuery Mobile 当前 版 本 的 样式 CSS 文件 。 设 计 者 可 以 
从 jQuery Mobile 中 找到 文件 名 中 带 有 “theme ”字样 的 CSS 文件 ， 并 把 它 复制 粘贴 到 导入 窗口 
中 。 更 简单 的 办 法 是 直接 使 用 导入 窗口 右上 角 上 的 Import Default Theme( 导 入 默认 样式 主题 ) 功 
能 ， 指 定 版 本 的 默认 样式 主题 会 自动 填充 导入 窗口 ， 如 图 9.12 所 示 。 当 样式 主题 CSS 填充 导 
入 窗口 完成 以 后 ， 单 击 Import 按钮 完成 导入 过 程 。 


Import Detault Theme 


Import Theme 


9.12 ”样式 导入 窗口 


3. 下 载 窗口 


当 设 计 者 新 建 或 者 修改 一 个 样式 主题 的 任务 完成 以 后 ， 点击 Download( 下 载 ) 按 钮 ， 打开 如 
图 9.13 所 示 的 下 载 窗口 。 设 计 者 在 窗口 的 右上 角 Theme Name( 主 题名 ) 输 入 框 中 ， 给 完成 的 样 
式 主题 起 一 个 名 字 ， 然 后 点 击 Download Zip 下 载 定制 的 样式 主题 到 本 地 计算 机 。 下 载 的 Zip 
文件 包含 了 普通 版 本 和 压缩 版 本 。 普 通 版 本 的 CSS 文件 便于 阅读 ， 也 可 以 用 来 下 次 通过 导入 
窗口 继续 修改 。 压 缩 版 本 的 CSS 文件 可 用 于 产品 环境 。 


Download Theme 


This will generate a Zip file that 


To use your theme add it logether 
this 


9.13 样式 主题 下 载 窗口 
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4. 配色 面板 
ThemeRoller 使 用 了 如 图 9.14 所 示 的 多 种 配色 工具 。 


Drag a color onto an element below or pick from the 图 Adobe Kuler swatches » 


Recent Colors colors. 


© SATURATION 
图 9.14 ThemeRoller 中 的 调 色 面板 

调 色 面板 的 主要 部 分 有 一 个 调 色 板 和 亮度 /饱和 度 调节 滑动 条 。 通 过 拖 动 滑动 条 ， 调 色 板 

中 的 颜色 会 随 之 改变 。 也 可 以 直接 拖 动 调 色 板 中 的 色 块 到 设计 模板 中 。 最 新 被 选用 的 颜色 会 


动 填充 到 Recent Colors( 最 近 使 用 的 颜色 ) 列 表 中 。 
点 击 调 色 板 上 方 的 Adobe Kuler Swatches， 就 会 打开 一 个 Adobe Kuler 主题 色彩 选择 窗口 ， 


如 图 9.15 所 示 。 相 同 的 配色 工具 也 可 以 在 Photoshop 中 见 到 。Kuler 提供 了 很 多 色彩 主题 及 其 
包含 的 样本 色 。 这 些 颜 色 便 于 jQuery Mobile 样式 设计 者 直接 选用 。 


1™ LIGHTNESS 


villa rerunninc Macazine 


colored by 
WD Adobe®kuler 


thouaht 


图 9.15 Kuler 配 色 窗 口 
当 设计 者 点 击 ThemeRoller 窗口 上 的 Colors 时 ， 屏 幕 上 会 弹出 一 个 色 环 。 设 计 者 通过 选择 
色 环 中 的 一 个 点 所 代表 的 颜色 , 来 选取 想 要 得 到 的 颜色 , 如 图 9.16 所 示 。 在 选择 一 个 颜色 以 后 ， 


这 个 颜色 被 放 入 Recent Colors 列表 中 。 


Recent Colors cot 


CO BjQuer/ 


图 9.16 通过 色 环 选择 颜色 


9.3.2 ThemeRoller 样 式 的 定制 方法 

ThemeRoller 定制 样式 的 操作 方法 比较 比较 简单 ， 当 设计 方案 完成 以 后 ， 大 部 分 的 设置 工 
作 可 以 通过 拖 放 的 方式 来 实现 ， 如 果 需 要 ， 也 可 以 做 进一步 的 手工 修改 。 所 有 这 些 操作 都 不 需 
要 设计 者 掌握 CSS 的 知识 ， 不 涉及 CSS 编程 。 
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1. 样本 选择 
ThemeRoller 主页 面 的 左边 部 分 , 是 一 个 如 图 9.17 所 
示 的 含有 多 个 标签 页 的 网 页 结构 。 这 些 标签 页 分 别 代表 了 RS 
Global( 全 设置 ) 和 导入 到 ThemeRoller 中 样式 主题 所 包括 
的 每 一 个 样本 (swatch)。 如 果 没 有 通过 导入 窗口 把 已 有 的 Theme Settings 
样式 主题 导入 到 工具 中 ， 那 么 ， 当 ThemeRoller 启动 时 ， nad 
会 有 3 个 空白 样本 已 经 在 工具 中 打开 , 每 一 个 空白 样 木 都 全 
对 应 一 个 样本 代号 (a、b、c)， 同 时 建立 3 个 标签 页 ， 对 应 i 
这 3 个 空白 样本 。 设计 者 可 以 点 击 标签 页 的 页 头 , 切换 到 
全 局 设置 或 者 切换 到 某 一 个 样本 。 图 9.17 样本 选择 
2. 全 局 设置 


全 局 设置 所 创建 的 CSS 将 被 整个 jQuery Mobile 网 站 共享 。 这 一 部 分 所 产生 的 CSS 将 重新 
定义 jQuery Mobile 框架 本 身 提供 的 全 局 样式 设置 ( 见 图 9.3 中 的 第 一 幅 画面 )。 

全 局 设置 分 为 4 个 配置 单元 : Font Family( 字 体 家 族 )、Comer Radii( 角 的 弧度 )、Icon( 图 标 )、 
Box Shadow( 阴 影 )。 

图 9.18 显示 了 有 关 全 局 设置 的 4 个 设置 单元 中 的 具体 内 容 。 设 计 者 可 以 直接 输入 参数 值 ， 
或 者 利用 滑动 条 输入 。 如 果 需 要 设置 颜色 ， 当 点 击 了 颜色 字段 以 后 ， 屏 幕 上 会 弹出 一 个 色 环 ， 
供 设 计 者 直接 选取 颜色 。 设 计 者 也 可 以 直接 输入 RGB 颜色 值 。 当 颜色 输入 完成 后 ， 相 应 的 颜 
色 输 入 字段 的 背景 色 会 变 成 设计 者 刚刚 输入 的 颜色 。 


7 Comer Radii 
™ Font Family 


GROUP [6em | C—O 
BUTIONS jjem | C—O 


FONY Helvetica, Arial, sans-serif 


TIcon ™ Box Shadow 
DEFAULTICON | with Disc » Color pr 
DF 000000 | OPAGm [20 


DISC OPACITY [40 SIZE [3px 


9.18 全 局 设置 的 4 个 单元 


3. 样 本 设置 


每 一 个 样本 对 应 的 标签 页 都 包含 有 相同 的 设置 内 
容 。 标 签 页 右 侧 的 “+” 标 记 用 于 新 增 一 个 样本 。 如 果 se 《 


想 要 删除 一 个 样本 ， 只 需要 在 标签 页 上 选择 想 要 删除 Sa pte 
的 样本 ， 然后 点 击 Delete( 删 除 ) 即 可 。 增 加 和 删除 功能 9.19 增加 、 删 除 样 本 
如 图 9.19 所 示 。 


设置 一 个 样本 分 为 8 个 单元 进行 : Page( 页 面 )、Header/Footer Bar( 工 具 栏 页 头 /页 尾 )、 
Body(UI 组 件 的 内 容 )、Link( 链 接 )、Button Normal( 按 钮 ) Button Hover( 悬 停 状 态 的 按钮 ) .Button 
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Pressed( 被 按 下 的 按钮 )、Active State( 活 跃 状态 )。 图 9.20 是 上 述 8 种 单元 可 供 设置 的 具体 内 容 。 


TEXTCOLOR 本 3 TEXTCOLOR EE 
TExTsHADoW lo jw lo Jpess DOW[ Mpx lo Peceeee 
BACKGROUND Fe — BACKGROUND Feseses 
BORDER FE66665 BORDER Faddadd 
es bss | | UNK color Er [-] 
0 jlipx lo 
ume Hoven pop 
BACKGROUND [sfffff | UNKACUVE oossse | 
UNKVISIED 
BORDER Faddddd ET 
TBITCOLOR FE TETColoR gE 
TEXTSHADOW [0 lpx | Fess TEXTSHADOW [0 lpx |lo | Fss 
BACKGROUND [er6r676 — BACKGROUND Fededed 
BORDER adaddd BORDER dddddd 
TECTCOLOR FE TEXTCOLOR [rrtrrt | 
‘Tershapow lo jpx | Fsss TEXTSHADOW [0 lipx jlo 
BACKGROUND Pesesea BACKGROUND Ey 
BORDER [edddddd BORDER Ey 


9.20 设置 一 个 样本 的 8 个 单元 


样本 设置 的 8 个 单元 分 别 用 于 设置 网 页 的 不 同 部 分 , 每 一 个 单元 中 可 供 设置 的 内 容 大 同 小 
异 。 通 用 的 配置 项 目 包括 TEXT COLOR( 文 字 颜色 )、TEXT SHADOW( 文 字 阴 影 )、 
BACKGROUND( 背 景 颜 色 )、BORDER( 边 线 颜 色 )。 大 部 分 设置 项 只 有 一 个 输入 值 ， 只 有 文字 
阴影 有 4 个 输入 值 ， 依 次 是 水 平 阴影 、 垂 直 阴 影 、 模 糊 化 半径 、 阴 影 颜 色 。 这 些 操作 可 以 手工 
输入 。 如 果 需 要 输入 颜色 值 ， 还 可 以 从 调 色 面 板 中 的 调 色 板 、Adobe Kuler 颜色 、 色 环 ， 或 者 
最 近 使 用 过 的 颜色 列表 中 直接 抓 取 ， 拖 动 色 块 到 模拟 样本 窗口 中 ， 这 样 ， 相 应 的 颜色 就 会 直接 
填充 到 样本 设置 中 8 个 单元 的 正确 位 置 上 。 

当 一 个 样本 设置 完成 以 后 ， 相 应 的 模拟 样本 窗口 中 的 所 有 部 分 应 该 已 经 被 完全 填充 ， 没 有 
遗漏 。 模 拟 样本 是 检查 样本 设置 的 一 个 简单 工具 ， 也 是 观察 样本 是 否 符合 设计 需求 的 最 直观 方 
法 。 当 然 ， 设 计 者 应 该 事先 预备 一 些 测试 网 页 ， 当 定制 样式 完成 并 下 载 到 本 地 以 后 ， 应 该 在 测 
试 网 页 中 链接 新 的 定制 样式 ， 并 对 网 页 中 相关 的 UI 组 件 设 置 正确 的 data-theme 和 其 他 必需 的 
样式 属性 。 只 有 通过 测试 的 定制 样本 才能 被 应 用 于 网 站 开发 。 因 此 ， 样 式 定制 可 能 先 于 网 站 项 
目 进度 ， 或 者 平行 开发 ， 而 不 是 滞后 。 
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9.4 UI 组 件 定制 实例 


对 于 jQuery Mobile 的 定制 , 除了 通过 样式 主题 系统 为 网 页 的 不 同 部 分 以 及 不 同 的 UI 组 件 
分 别 设置 不 同 的 颜色 ， 在 更 多 情况 下 ， 还 需要 直接 利用 CSS 甚至 JavaScript 对 UI 组 件 进行 深 
度 定制 。 这 一 节 ， 我 们 通过 彼此 独立 的 实例 ， 介 绍 一 些 常见 的 UI 组 件 定制 方法 。 这 些 方法 提 
供 了 一 些 解决 方案 的 思路 ， 但 并 不 代表 相关 定制 的 最 佳 实践 。 


9.4.1 100% 宽 度 的 滑动 条 


-个 标准 的 滑动 条 具有 如 图 9.21 所 示 的 标题 、 数 字 
输入 框 和 滑动 条 三 个 组 成 部 分 。 月 从 
在 本 书 第 8 章 中 已 经 介绍 了 通过 HTML 5 或 者 jQuery 3 
Mobile 的 属性 使 滑动 条 具有 迷你 、 隐 藏 标题 、 失 效 等 显 
示 效 果 , 如 果 要 使 滑动 条 占用 全 部 显示 屏 的 宽度 , 以 上 常 
规 的 方法 则 无 法 实现 特殊 的 定制 要 求 。 
相对 于 常规 的 滑动 条 ， 全 宽度 的 滑动 条 是 在 常规 滑动 条 的 基础 上 进行 两 处 必要 的 改变 。 
e ”取消 滑动 条 前 面 的 数字 输入 框 。 
@ ”滑动 条 的 滑 轨 两 端 与 浏览 器 边界 保持 相同 的 缩 进 。 这 两 个 必须 执行 的 改变 都 可 以 通过 
CSS 来 完成 。 
-个 常规 的 滑动 条 由 以 下 代码 产生 : 
<form target="#" id="myForm"> 
<label for="years"> 年 代 </label> 
<input type="range" name="years" id="years" 
value="2010" min="1940" max="2050" step="10"> 
</form> 
经 过 jQuery Mobile 的 处 理 ， 真 正在 浏览 器 中 的 用 于 网 页 输出 的 代码 实际 上 与 上 述 原始 代 
码 不 同 。 利 用 Chrome 浏览 器 中 的 调试 工具 ， 或 者 Firefox 浏览 器 的 Firebug 插件 ， 我 们 都 能 很 
容易 地 分 析 并 调试 经 过 jQuery Mobile 修改 变换 、 用 于 网 页 显示 的 代码 。 
图 9.22 中 的 两 幅 画 面 分 别 定位 了 滑动 条 在 网 页 中 的 数字 输入 框 和 滑 轨 部 分 。 这 两 个 部 分 正 
是 我 们 需要 修改 的 部 分 。 
通过 以 上 代码 分 析 ， 原 始 滑动 条 代码 中 的 <input type=“range”..> 被 转换 成 了 <input 
type=“number” data-type='“range”..>。 这 样 的 转换 使 <input> 元 素 成 为 一 个 数值 型 的 输入 字段 。 
我 们 要 做 的 第 一 个 改动 ， 就 是 要 隐藏 这 个 输入 字段 。 另 外 ，jQuery Mobile 添加 了 一 段 代 码 <div 
class=“ui-slider-track .….”...>。 这 正 是 在 网 页 中 显示 滑 轨 的 代码 。 从 图 9.22 的 第 二 幅 画 面 可 以 看 
到 ， 滑 轨 具 有 “margin: 0 15px 0 68px;” 这 样 的 样式 。 这 个 样式 可 以 进一步 解释 为 滑 轨 与 浏览 
器 右边 界 的 距离 为 13px， 但 是 与 浏览 器 左边 界 的 距离 为 68px。 为 了 保持 滑 轨 两 端的 空白 相等 ， 
我 们 把 滑 轨 的 左 端 与 浏览 器 边框 的 距离 同样 也 设置 为 15px。 


9.21 常规 滑动 条 的 组 成 部 分 
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加 | 


QiAl1 汪 闪 日 ， 


<label for="years™ id 
label"> 年 代 c/labely 


ui-body-inherit ui-corner-all ui- 

Slide 

Vediv role="application” class=’ 

“ui-slider-track ui-shadow-inset 
-corner -all™> 


-shadow”role= 
ider” aria-valuesil 


. = 


Computed Event Listeners DOM 


ppearance: none; 


cont ent -bal 
content -box; 


O101 绍 口 , 


1abel”) 年 代 </1abel> 
class="ui-sliderny 

::before 
Sinput type="nuaber" data-type= 
"range” name="yearsw jd 
value="2010" min="1940" max="2050" 
step="10" class="ui-shadow-inset 
上 -body-inherit ui-corner-all ui- 
Slider-input"> 

vediv role="applicatiom 
“ui-slider-track ui-shadow-inset 


Ge 


ui-bar -inherit ui-corner-allwy 
<a href="#" class="ui-slider- 
ndle ui-btn ui-shadow” role= 
lider” aria-valuenin="1940" 
ueman="2050" 
Valuenow="2010" aria 
"2010" title="2010" aria- 


9.22 ”滑动 条 的 实际 代码 


Styles| Computed Event Listeners DOM Breakpoints » 
jnuery mobile-1.4.2.min. cs5:3 


all, ui-btn.ui-corner-all, .ui-slider- 
track.ui-corner -all, .ui-flipswitch.ui-corner- 
all, -ui-li-count { 

-webkit -border -radius: > .3125enm; 

border -radius: > .3125em; 
} 


ui-slider-track jauery. nobile-1.4.2.win.css:3 
{ 

position; relative; 

overflow: pvisible; 

border -width: > 1px; 

border-style: > solid; 

height; 15px; 

nargin: ee 15px © 68px; 

top: 6px; 
} 


ui-shadow-inset jau 


ui-btn-corner- 


下 面 的 代码 9.2 体现 了 以 上 两 点 改变 ， 使 一 个 普通 的 滑动 条 成 为 全 宽度 的 滑动 条 。 
代码 9.2 全 宽度 滑动 条 的 定制 


<!DOCTYPE html> 
<html> 
<head> 


<title>jQuery Mobile - UI 组 件 定制 </title> 

<meta charset="utf-8" /> 

<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 

<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 

<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<style> 


#myForm input[data-type="range"] { 


display: 
} 


none; 


#myForm .ui-slider-track { 


margin-left: 
} 
</style> 


15px; 


> 349 


国 jQuery Mobile 移 动 网 站 开发 


</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<hl1> 滑 动 条 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form target="#" id="myForm"> 
<label for="years"> 年 代 </label> 
<input type="range" name="years" id="years" 
value="2010" min="1940" max="2050" step="10"> 
</form> 
</div> 
</div> 
</body> 
</html> 


9.4.2” 列 宽度 不 相等 的 网 格 


网 格 的 一 个 特点 ， 是 每 一 列 的 宽度 相同 。 比 如 一 个 含有 5 列 的 网 格 ， 每 一 列 的 宽度 是 全 部 
网 格 宽度 的 20%。 网 格 中 每 一 列 等 宽 的 特点 并 不 是 与 生 俱 来 的 , 而 是 通过 jQuery Mobile 中 CSS 
的 定义 获得 的 。 图 9.23 中 ， 深 色 背 景 的 部 分 是 jQuery Mobile 对 一 个 含有 5 列 的 网 格 中 每 一 列 
宽度 的 定义 。 从 图 中 还 能 看 到 ， 如 果 一 个 网 格 含 有 4 列 ， 那 么 每 一 列 的 宽度 是 25%， 这 同样 是 


由 jQuery Mobile 中 的 CSS 决定 的 。 


2588 .ui-grid-c > .ui-block-a, 
2589 .ui-grid-c > .ui-block-b, 
2590 .ui-grid-c > .ui-block-c, 
2591 .ui-grid-c > .ui-block-d{ 
2592 /* width: 24.9254; IE7 */ 
2593 /* margin-right: -.Spx; BBS */ 
2594 width: 25%; 

2595°% ") 

2596 

2597 

2598 

2599 

2600 

2601 


9.23 jQuery Mobile 对 于 4 列 和 5 列 网 格 宽度 的 定义 


对 网 格 中 列 宽度 的 改变 ， 必 须 重 新 定义 在 jQuery Mobile 框架 中 的 默认 设置 。 直 接 修改 
jQuery Mobile 的 CSS 文件 并 不 是 好 办 法 。 通 常 ， 在 网 页 中 采用 临时 定义 的 方法 覆盖 系统 框架 


中 的 默认 定义 ， 同 时 要 注意 临时 定义 在 整个 网 站 中 的 作用 范围 。 
代码 9.3 演示 了 重新 定义 网 格 中 列 宽 的 方法 ， 显 示 效果 如 图 9.24 所 示 。 同 样 的 原 到 
于 其 他 需要 临时 变更 默认 UI 组 件 显示 样式 的 场合 。 
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代码 9.3 自 定义 网 格 中 列 的 宽度 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - UI 组 件 定制 </tit1le> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script sr js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<style> 
suai-grid-d 1 
text-align: center; 


} 

.ui-grid-d>.ui-block-a, .ui-grid-d>.ui-block-e { 
width: 15%; 
background-color: #F0FOFO; 

} 

.ui-grid-d>.ui-block-b, .ui-grid-d>.ui-block-d { 
width: 20%; 
background-color: #E8E8E8; 

} 

.ui-grid-d>.ui-block-c { 
width: 30%; 
background-color: #EOEOE07 

} 

</style> 
</head> 


<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 网 格 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div class="ui-grid-d"> 
<div class="ui-block-a">—</div> 
<div class="ui-block-b">—</div> 
<div class="ui-block-c"> 三 </div> 
<div class="ui-block-d"> 四 </div> 
<div class="ui-block-e"> 五 </div> 
</div> 
</div> 
</div> 
</body> 
</html> 
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9.4.3 ” 带 有 永久 删除 按钮 的 搜索 框 


jQuery Mobile 对 于 搜索 框 赋予 了 统一 的 样式 和 基本 功能 。 在 搜索 框 的 左 端 有 一 个 表明 输入 


框 类 型 的 图 标 ,在 搜索 框 的 右 端 有 一 个 删除 按钮 ， 当 搜索 框 中 没有 填 入 内 容 时 ， 删 除 按钮 处 于 
隐藏 状态 ， 当 用 户 在 搜索 框 中 输入 内 容 后 ， 删 除 按钮 立刻 变 为 可 见 状 态 ， 如 图 9.25 所 示 。 由 此 
可 见 ， 删 除 按钮 具有 两 种 状态 。 如 果 需 要 把 删除 按钮 设计 成 永久 显示 ， 就 需要 针对 这 两 种 状态 


做 专门 的 设置 。 
[Se 72 | [SS e sm 0 73 | 
Jam.webhop me i jam webhop me 
网 格 文本 粮 入 ( 查 淘 ) 


352 «< 


[二 | BEES 
图 9.24 ” 列 宽度 不 相等 的 网 格 图 9.25 搜索 框 中 删除 按钮 的 永久 显示 
从 图 9.26 中 Chrome 浏览 器 的 调试 工具 中 可 以 看 到 , 删除 按钮 是 通过 一 个 <a> 链 接 实现 的 。 
文本 输入 查询) 


© DD file:///C:/Documents%20and9%205ettings/xinyi/My%20Documents/Dropbox/Publi 窑 是 
文本 输入 (查询) 


Q Elements| Network Sources Timeline Profiles Resources Audits Console A1 大 交 日 ， 
bar -InF 


Ses | Computed Event Listeners DOM ls 
body-s a:visited, Wal bod ro 


nput -clear ui-btn ui-icon- 
delete ui-btn-icon-notext ui-corner-all ui-input- 
clear-hidden" title="Clear text">Clear text</a> 
after 


图 9.26 在 Chrome 浏 览 器 的 调试 工具 中 观察 删除 按钮 的 实现 方法 
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这 个 链接 被 jQuery Mobile 赋予 了 ui-btn、ui-icon-delete 等 CSS 类 ,因而 具有 了 按钮 的 外 观 
特征 ， 还 被 添加 了 一 个 删除 图 标 。 由 于 图 中 的 搜索 框 还 没有 被 输入 任何 内 容 ， 当 前 的 CSS 类 
“ui-input-search .ui-input-clear-hidden” 的 状态 是 display: none， 即 隐藏 状态 。 因 此 ， 如 果 把 这 
个 CSS 类 选择 器 的 状态 改 为 可 见 ， 那 么 删除 按钮 就 会 在 任何 时 候 都 处 于 可 见 状态 。 
代码 9.4 是 实现 永久 删除 按钮 的 完整 代码 。 添加 一 段 CSS 代码 就 能 够 轻松 地 实现 搜索 框 的 
定制 。 
代码 9.4 带 有 永久 删除 按钮 的 搜索 杠 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI 组 件 定制 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<style> 
.ui-input-search .ui-input-clear-hidden { 
display: block; 
} 
</style> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header"> 
<h1> 文 本 输入 (查询 ) </h1> 
</div> 
<div class="ui-content" role="main"> 
<form> 
<label for="mySearch"> 查 询 </label> 
<input type="search" name="mySearch" id="mySearch" 
placeholder=" 查 询 条 件 . .." data-clear-btn="true"/> 
</form> 
</div> 
</div> 
</body> 
</html> 


9.4.4 输入 框 中 提示 信息 的 样式 


-个 输入 框 可 以 通过 placeholder 属性 在 输入 框 的 背景 上 显示 一 些 提示 说 明 , 提示 文字 通常 
如 图 9.27 所 示 ， 颜 色 比较 灰暗 ， 当 用 户 开始 输入 时 ， 说 明文 字 自动 隐藏 。 在 一 些 显示 屏 较 小 的 
设备 上 ， 过 于 灰暗 的 提示 文字 难以 阅读 ， 需 要 通过 改变 字体 颜色 等 样式 等 方法 使 它 容易 辨认 。 
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图 9.27 输入 框 中 的 提示 说 阴 


目前 ， 标 准 的 CSS 还 不 能 实现 这 个 要 求 ， 但 是 ， 浏 览 器 厂商 已 经 注意 到 了 这 个 需要 ， 并 
且 已 经 出 现 了 一 些 解决 方案 。 移动 网 站 需求 分 析 与 设计 阶段 需要 注意 ， 由 浏览 器 厂商 自主 开发 

的 解决 方案 不 具有 通用 性 ， 另 外 ， 由 于 浏览 器 版 本 的 更 新 ， 在 同一 种 浏览 器 的 不 同 版 本 之 间 ， 
浏览 器 厂商 可 能 会 提供 不 同 的 解决 方案 。 这 两 个 制约 条 件 要 求 设 计 者 明确 ， 设 计 目 标 是 为 某 一 
个 或 者 某 几 个 特定 的 浏览 器 而 设计 ， 当 移动 设备 的 操作 系统 或 者 浏览 器 自动 升级 时 ， 一 些 已 经 
在 使 用 中 的 定制 样式 可 能 会 突然 失去 作用 。 由 于 附加 在 提示 信息 上 的 样式 与 网 站 的 实际 功能 无 
关 ， 因 此 ， 即 使 有 上 述 两 点 技术 上 的 制约 ， 设 计 者 仍然 可 以 在 网 站 中 使 用 这 一 小 节 中 介绍 的 方 
法 。 由 浏览 器 厂商 提供 的 特殊 样式 特性 ， 在 通常 情况 下 ， 不 会 由 于 兼容 性 问题 对 网 站 的 实际 功 
能 造成 严重 影响 。 

代码 9.5 演示 了 WebKit 浏览 器 的 解决 方案 。 由 于 Chrome 和 Safari 都 是 基于 WebKit 内 核 
的 浏览 器 ， 这 段 代 码 中 介绍 的 方法 ， 能 够 在 上 述 两 种 主流 移动 浏览 器 中 运行 ， 因 而 能 够 基本 满 
足 Android 和 iPhone 用 户 的 需要 。 代 码 9.5 能 够 使 提示 信息 在 输入 框 中 显示 为 蓝 色 。 

代码 9.5 “定制 输入 框 中 说 明文 字 的 样式 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - UI 组 件 定制 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<style> 
::-webkit-input-placeholder { 
color: blue; 
} 
</style> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header"> 
<h1> 文 本 输入 (查询 ) </h1> 
</div> 
<div class="ui-content" role="main"> 
<form> 
<label for="mySearch"> 查 询 </label> 
<input type="search" name="mySearch" id="mySearch" 


placeholder=" 请 输入 订单 号 码 ..." 
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data-clear-btn="true" /> 
</form> 
</div> 
</div> 
</body> 
</html> 


9.4.5 圆 角 选择 开关 


图 9.28 显示 了 一 个 普通 的 选择 开关 组 件 的 两 种 状态 ， 默 认 的 选择 开关 为 长 方形 ，4 个 角 稍 
微 有 一 些 弧度 ， 也 可 以 设置 为 不 带 弧度 的 直角 ， 按 钮 上 有 文字 说 明 开关 的 当前 状态 。 在 iPhone 
和 Android 系统 上 ， 我 们 更 多 地 是 看 到 如 图 9.29 所 示 的 开关 。 这 一 类 开关 上 面 没有 文字 ， 以 
角 方 式 呈 现 ， 而 且 UI 组 件 的 整体 宽度 比较 小 。 


EE) | “ @&) 


图 9.28 ”默认 的 选择 开关 图 9.29 去 除了 按钮 文字 的 圆 角 开关 


为 了 在 网 页 上 模拟 iPhone 和 Android 系统 中 的 开关 样式 ,我 们 需要 对 普通 开关 做 三 点 变化 : 

@ ”去 除 按钮 文字 。 

@ ”为 开关 组 件 增加 圆 角 。 

e 缩 窗 开关 组 件 的 宽度 。 

代码 9.6 是 一 个 实现 图 9.29 中 圆 角 开关 的 完整 实例 , 这 段 代 码 解释 了 以 上 3 种 必须 完成 的 
改变 所 使 用 的 技巧 。 

去 除开 关 组 件 按钮 上 的 文字 比较 简单 。 开 关 组 件 本 身 提供 了 data-on-text 和 data-off-text 两 
个 属性 ， 用 于 设置 “ 开 ” 状 态 和 “ 关 ” 状 态 时 开关 按钮 上 的 文字 。 只 要 被 这 两 个 属性 设置 空 字 
符 串 作为 属性 值 ， 按 钮 上 就 不 再 会 显示 文字 。 

jQuery Mobile 的 按钮 和 开关 等 UI 组 件 可 以 通过 jQuery Mobile 提供 的 CSS 类 设置 4 个 角 。 
如 果 调 试 一 个 普通 的 开关 组 件 ， 可 以 看 到 组 件 的 角 是 由 CSS 选择 器 .ui-flipswitch.ui-corner-all 
设置 的 。 只 需要 对 这 个 选择 器 下 的 样式 重新 定义 ， 设 置 更 大 的 边 角 半 径 ， 就 能 够 得 到 圆 角 的 显 
示 效 果 。 

缩减 开关 组 件 的 宽度 比较 复杂 。 由 于 开关 组 件 有 两 种 状态 ， 当 组 件 上 需要 显示 文字 时 ， 必 
须 考虑 文字 的 宽度 对 于 开关 组 件 造成 的 影响 。 

代码 9.6 中 ， 首 先 对 开关 组 件 使 用 了 data-wrapper-class 属性 ， 这 个 属性 用 来 通知 jQuery 
Mobile 开关 组 件 的 更 多 样式 将 由 data-wrapper-class 属性 的 属性 值 所 指定 的 CSS 类 来 描述 。 但 
是 ， 在 实际 情况 下 ， 这 个 被 指定 的 CSS 类 因为 CSS 选择 器 优先 权 的 原因 有 可 能 无 效 。 

另外 需要 注意 ， 图 9.28 和 图 9.29 中 的 开关 组 件 中 有 一 个 空心 的 方形 或 者 圆 形 类 似 于 滑 块 
的 按钮 。 这 个 按钮 的 默认 宽度 是 1.875em。 如 果 要 把 整个 开关 组 件 的 宽度 设置 为 3.4em， 那 么 
这 个 按钮 左边 就 需要 留 出 1.525em(3.4-1.875= 1.525) 的 空白 区 域 。 在 定制 的 CSS 中， 我 们 使 用 
了 padding-left: 1.525em; 把 按钮 向 右 “ 推 ”到 了 正确 的 位 置 上 。 

如 果 设 计 者 还 需要 为 开关 组 件 设 置 颜色 ， 直 接 修改 CSS 在 技术 上 可 行 ， 但 从 代码 的 标准 
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化 和 易 维 护 程度 来 说 ， 使 用 样式 主题 是 一 个 更 加 恰当 的 做 法 。 
代码 9.6 圆 角 选 择 开 关 的 定制 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - UI 组 件 定制 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<style> 
.ui-flipswitch.ui-corner-all { 
border-radius: lem; 


} 

html .ui-field-contain>label+.ui-flipswitch { 
width: 3.4em; 

} 


.Custom-size-flipswitch.ui-flipswitch.ui-flipswitch-active { 
padding-left: 1.525em; 


width: 1.875em; 
} 
</style> 
</head> 


<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 圆 角 开关 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form> 
<div class="ui-field-contain"> 
<label for="yes_no"> 功 能 激活 </label> 
<input type="checkbox" data-role="flipswitch" 
name="yes_n 
data-on-text="" data-off-text="" 
data-wrapper-class="custom-size-flipswitch"> 
</div> 
</form> 
</div> 
</div> 
</body> 
</html> 


" id="yes_no" 
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9.5 本 章 习 题 


1. 样式 设计 练习 


(1) 设计 一 套 样 式 ， 要 求 完全 保留 jQuery Mobile 自 带 的 样本 a 和 b。 新 的 样本 c 以 蓝 色 为 
基调 ， 样 本 d 以 浅 红色 为 基调 。 并 且 设 计 一 个 测试 网 页 ， 通 过 网 页 上 的 工具 栏 ， 网 页 背景 ， 以 
及 4 个 按钮 来 分 别 测试 样式 文件 中 4 个 样本 的 实际 作用 。 

(2) 设计 一 套 样 式 ， 要 求 仅 保留 jQuery Mobile 自 带 的 样本 a。 新 的 样本 b 以 蓝 色 为 基调 ， 
样本 ec 以浅 红色 为 基调 。 并 且 设计 一 个 测试 网 页 ， 通 过 网 页 上 的 3 个 按钮 来 分 别 测试 样式 文件 
中 3 个 样本 的 实际 作用 。 

(3) 设计 一 套 样 式 ， 要 求 不 能 保留 jQuery Mobile 自 带 的 样本 。 新 的 样本 a 以 蓝 色 为 基调 ， 
样本 b 以 浅 红色 为 基调 。 并 且 设计 一 个 测试 网 页 ， 通 过 网 页 上 的 两 个 按钮 来 分 别 测试 样式 文件 
中 两 个 样本 的 实际 作用 。 

2. 编程 是 


(1) 设计 一 个 圆 角 按钮 ， 要 求 不 能 借助 于 ThemeRoller。 
(2) 利用 nativeDroid 样式 主题 中 的 蓝 色 样本 和 浅 色 表现 方式 设计 一 个 网 页 。 要 求 这 个 网 
页 的 页 头 中 拥有 导航 条 ， 页 尾 中 包含 nativeDroid 的 版 权 信 息 。 
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全 Ar 2 
宙 10 音 
jQuery Mobile 功 能 的 扩展 


本 章 导读 : 


jQuery Mobile 在 为 移动 网 站 设计 与 开发 提供 便利 的 同时 ,也 提供 了 一 些 扩 展 框 
架 自 身 功能 的 方法 .扩展 jQuery Mobile 并 不 是 一 个 发 明 创造 的 过 程 , 而 是 对 jQuery 
Mobile 框架 的 补充 和 完善 的 过 程 。 

在 扩展 jQuery Mobile 框架 功能 的 同时 ， 必 须 清楚 地 意识 到 一 些 扩 展 方案 会 引 
起 兼容 性 (浏览 器 、 技 术 标 准 、 多 媒体 格式 类 型 ) 问 题 ， 或 者 运行 性 能 方面 的 问题 。 

另外 ， 阅 读 这 一 章 之 前 ， 应 该 对 本 书 第 3 章 中 的 伪 类 、 伪 元 素 、 二 维 /三 维 变 
换 、 动 画 效 果 等 概念 比较 熟悉 。 通 过 这 一 章 的 学 习 ， 读 者 将 从 3 个 方面 了 解 jQuery 
Mobile 对 现 有 框架 功能 的 扩展 : 图 标 集 、 页 面 切 换 动 画 效 果 、UI 组 件 。 这 一 章 的 
内 容 将 拓展 移动 网 站 设计 人 员 在 解决 方案 上 的 思路 .但 是 对 于 相关 方案 的 技术 成 熟 
度 、 理 论 化 ， 以 及 最 佳 实践 等 ， 还 有 待 探 索 。 
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10.1 图 标 集 的 扩展 


jQuery Mobile 框架 带 有 一 个 包括 了 50 个 图 标的 图 标 集 。 这 些 图 标 包 括 了 上 、 下 、 左 、 碳 
箭头 ， 信 息 、 有 用户、 音频、 视频、 返回、 商店 、 位 置 、 锁 、 留 言 /备注 、 编 辑 、 删 除 、 禁 目 、 
云 、 钟 、 网 格 等 一 系列 容易 识别 并 且 经 常 使 用 的 图 标 。 但 是 在 很 多 场合 ， 由 于 业务 需要 ， 仍 然 
需要 增加 一 些 比如 信用 卡 等 不 包括 在 jQuery Mobile 图 标 集中 的 图 标 ， 或 者 一 个 公司 需要 自 定 
义 与 本 公司 业务 相关 的 商标 等 图 标 。 这 一 节 将 介绍 扩展 jQuery Mobile 图 标 集 的 几 种 方法 。 


10.1.1 制作 自 定 义 图 标的 基本 方法 


-个 jQuery Mobile 的 标准 图 标 在 1.4 版 与 1.3 版 中 的 显示 方法 不 同 。 在 最 新 的 jQuery Mobile 
1.4.x 中 ， 建 议 以 SVG 为 主 ， 作 为 图 标的 原始 图 片 ， 以 PNG 为 辅 ， 作 为 备 选 方案 ， 用 以 支持 一 
些 不 能 支持 SVG 的 浏览 器 。 图 标 以 背景 图 形 并 且 通 过 CSS 的 :after 伪 元 素 插入 到 被 选择 的 元 素 
内 容 的 后 面 。 在 CSS 中 定义 背景 图 形 时 ， 图 片 可 以 通过 url 指定 图 片 资源 文件 的 实际 位 置 ， 也 
可 以 在 url 中 通过 Base64 编码 的 方式 加 入 。 
因此 ， 定 制 一 个 标准 的 jQuery Mobile 图 标 需 要 一 个 SVG 和 一 个 PNG 图 片 ， 两 个 图 片 的 
内 容 相同 ， 但 图 形 格式 不 同 。jQuery Mobile 采用 14x14(px) 的 图 形 ， 我 们 也 建议 使 用 同样 大 小 
的 图 形 。 如果 使 用 尺寸 稍 大 的 正方 形 图 形 ， 也 可 以 在 CSS 中 通过 width 和 height 来 限定 图 形 的 
大 小 。 
图 片 可 以 使 用 Photoshop、Illustrator、Inkscape 等 工具 按照 常规 的 图 片 制作 过 程 完成 。 图 片 
设计 有 很 多 美术 技巧 ， 比 如 可 以 考虑 把 图 片 的 主体 部 分 设计 为 透明 ,利用 网 页 背景 颜色 来 显示 
-个 图 形 等 。 
制作 图 片 时 ， 应 该 注意 以 下 几 点 : 
@ 图标 在 显示 的 时 候 会 比较 小 ， 因 此 ， 用 作 图 标的 图 片 不 能 过 于 复杂 。 过 度 注 重 细节 的 
图 形 在 图 标 显 示 时 是 难以 辨认 的 。 

@ ”不 建议 使 用 过 度 复杂 的 色彩 。 

@ ” 当 采 用 透明 或 者 半 透 明 图 片 时 ， 应 该 注意 图 标 图 形 的 本 身 与 网 页 背景 的 对 比 关系 。 

另外 ， 还 需要 注意 导出 SVG 时 选用 的 格式 是 不 是 会 造成 透明 背景 丢失 。 

下 面 讲解 制作 一 个 标准 图 标的 具体 步骤 。 制造 图 标的 SVG 和 PNG 图 片 选 自 IcoMoon 的 免 
费 图 标 集 。 读 者 可 以 自行 选用 现 有 的 正方 形 SVG 和 PNG 图 片 。 

(1) 产生 Base64 编码 的 SVG 图 形 

很 多 网 站 提供 了 对 图 片 文件 进行 编码 的 在 线 服务 , 本 书 使 用 的 是 MobileFish 网 站 的 在 线 服 
务 (http://www.mobilefish.com/services/base64/base64.php)。 在 MobileFish 的 编码 /解码 网 页 上 ， 
选择 需要 编码 的 SVG 文件 (MobileFish 网 站 对 文件 有 100KB 的 限制 。 通 常 ， 原 始 SVG 图 标 图 
片 文 件 的 大 小 不 应 该 大 于 5KB)。 在 同一 个 网 页 上 ， 确 认 转 换 方式 为 Encode to Base64 string( 转 
换 为 Base64 编码 的 字符 串 )。 在 每 行 最 多 字符 (Max Characters Per Line) 选 项 填写 该 网 站 允许 的 
最 大 值 999。 在 填写 完成 以 后 ， 点 击 Convert( 转 换 ) 按 钮 ， 如 图 10.1 所 示 ，MobileFish 网 站 会 立 
即 在 输出 窗口 中 显示 SVG 图 片 文件 经 过 编码 的 Base64 字符 串 , 如 图 10.2 所 示 。 这 个 字符 串 就 
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是 我 们 需要 的 用 于 替代 原始 图 片 文件 的 Base64 编码 的 SVG 图 形 。 


Men aa 区 @ | Choose File |0034-library.svg 

Conversion method *; 圈 |Encode to 6ase64 string “| 

Select output *: 加 Output in textbox v 

Max characters per line *: 加 999 Allowed values0- 999. Use 0 for unlimited characters. 


To prevent automated 
submissions an Access Code 
has been implemented for this 
tool. 


Please enterthe Access Code 
as displayed above’: 


Cd 
10.1 利用 在 线 工 具 产生 Base64 编码 的 图 形 


CqF 


Output base64 encoder and decoder: 


PD94bUwgdmVyc21vbjoiNs4wIiBlbrNvVZGluZz0idXRmLTgiPz4KPCELLSBHZWUS1cmFOZWOgYn 
jegSWNvTW9vbi5pbyahcLT4KPCFETONUWUVBFIHN2ZYyBQVUJNSUMgITiOVL1CzQyBvRFREIFNWRYAX 
LjEVLOVOIiaiaHROcDovL3d3dy53MY5vcmcvR3JhcGhpY3MwU12ZHLzEuMS9EVEQVvc3ZnNMTEUZH 
RkIjJ4KPHN2ZYyB2ZXJzatW9uPSIxLjJEiIHhtbG5zpSJodHRuwoi8vd3d3LnczLm9yZyY8yHDAWL3N2 
2ZyIgeGlsbnM6eGxphbms9Imh0dHA6LyY93d3cudzHub3JnLzE5OTIcveGxphbmsiITHdpZHRoPSI2OC 
IgaGVp22hOPSIZ2NCIgdml1d0JveDOiNCAWIDY4IDYOIj4KPHBhdGggZDOiTTYOIDYwdi00acO0 
diOyNGgOdio0aCcOxNnYOaDR2NjRoLTEydiOyNGygOdi00aCOxNMnYOaDR2MjRoLTEydi0yNGgOdi 
00acOxMnYOaDR2NIRoLTEydiOyNGgOdi00aCOxNnYOaDR2MjRoLTR2NGgtNHYOaDY4di00aCO0 
eiIgZmlsbDOiITzhAwMDAWNMCI+PC9uYXRopgoBcGFOaCBkPSUNIHzIGMGgObDNMYIDIwdjRoLTY4di 
OObDNMYLTIweiIgZzmlsbDOiIzAwNHDAwNMCI+PC9wYXRoPgoBL3N2Zz4K 


10.2 ”经 过 编码 的 Base64 字符 串 


(2) 在 CSS 文件 中 配置 图 标 

这 里 ， 我 们 将 以 Base64 字符 串 的 形式 配置 SVG 图 形 ， 而 PNG 仍然 采用 传统 方式 。 通常， 
我 们 为 定制 图 标 单独 创建 一 个 CSS 文件 ， 以 便于 今后 维护 。 按 照 jQuery Mobile 定义 图 标的 惯 
例 ， 我 们 在 一 个 独立 的 CSS 文件 中 把 一 个 定制 图 标 通过 代码 10.1 中 的 方法 进行 定义 


代码 10.1 定制 图 标的 定义 


We SVG 二/ 
.ui-icon-library:after { 
background-image: url("data:image/svg+xml;base64, 

PD94bWwgdmVyc21vbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPzAKPCEtLSBH 
ZWS5l1cmFO0ZWQgYNKgGSWNVTW9VbiSpbyAtLTAKPCFETONUWVBFIHN2ZyBQVUJM 
SUMgIiO0vL1CczQy8vRFREIFNWRYyAxLjEVLOVOIiAiaHROcDovL3d3dy53My5v 
CmcVR3JhcGhpY3MvU12ZHLzEUMS9EVEQVCc3ZnMTEUZHRkI]j4KPHN22YB22ZXJz 
aw9uPSIXxLJjEiIHhtbG5zPSJodHRwoi8vd3d3LnczLm9YZ2Y8YMDRAwL3N22YIG 
eG1sbnM6eGxpbms9Imh0dqHA6LY93d3cudzMub3JUJnLzE5OtkveGxpbmsiIHdp 
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ZHROPSI20CIgaGVpZ22h0PSI2NCIgdmlld0JveDOiMCAwIDY4IDY0Ij4KPHBh 
dGggZDOiTTYOIDYwdi00aCc00di0yNGg0di00aCc0xMnY0aDR2MjRoLTEydi0y 
NGg0di00aCOxMnYO0aDR2MjRoLTEydi0yNGg0di00aC0xMnY0aDR2MjRoLTEYy 
di0yNGg0di00aC0xMnY0aDR2MjRoLTR2NGgtNHY0aDY4di00aCc00eiIgzmls 
bD0iIzRAwMDRAwMCI+PC9wYXRoPgo8cGF0aCBKkPSJUNMzIgMGg0bDMYIDIwdjRo 
ITY4di00bDMYLTIweiIgZm1lsbD0iIzRAwMDRAwMCI+PC9wYXRoPgo8L3N22ZZz4K") 7 
background-size: 14px 14px; 
有 


/* PNG */ 

.ui-nosvg .ui-icon-library:after { 
background-image: url("../images 1/icons-png/0034-library.png"); 
background-size: 14px 14px; 

} 

代码 10.1 演示 了 jQuery Mobile 图 标 在 CSS 文件 中 的 定义 方法 。 默 认 的 图 标 格式 是 SVG。 
图 标 由 CSS 类 ui-icon-< 图 标 名 > 声明 。 其 中 的 “ui-icon-” 前 级 是 jQuery Mobile 专用 的 定义 方 
法 。 通过 这 个 特定 前 级 , 加 上 图 标 名 所 形成 的 CSS 类 名 , 在 HTML 文档 中 对 应 了 data-role=“ 图 
标 名 ”。jQuery Mobile 1.4 中 的 图 标 是 通过 伪 元 素 :after 插入 到 网 页 中 的 ， 因 此 ， 在 定义 每 一 个 
图 标 所 使 用 的 CSS 中 ， 都 能 见 到 :after 的 踪影 。 

代码 10.1 中 的 SVG 图 形 部 分 使 用 了 Base64 编码 ，Base64 字符 串 从 第 一 步 中 的 在 线 转换 
工具 中 获得 ， 并 且 被 添加 到 了 “data:image/svg+xml:base64,” 后 面 。 以 上 代码 10.1 使 用 了 印刷 
格式 ， 在 实际 代码 中 ， 属 性 background-image 的 全 部 属性 值 出 现在 非常 长 的 一 行 中 。 

PNG 格式 的 图 标 使 用 的 CSS 选择 器 比 SVG 图 标的 选择 器 多 了 一 个 “ui-nosvg”。 

CSS 类 “ui-nosvg” 不 需要 在 网 页 代码 中 声明 ，jQuery Mobile 会 根据 检测 到 的 浏览 器 特性 
自动 为 不 能 支持 SVG 的 浏览 器 在 HTML 文档 中 插入 这 个 CSS 类 , 使 一 些 旧 版 本 浏览 器 最 大 限 
度 地 正常 工作 。 只 有 当 在 HTML 文档 中 出 现 了 CSS 类 “ui-nosvg ui-icon-library” 以 后 ，PNG 
格式 的 图 标 才 会 被 使 用 。 两 段 CSS 声明 都 出 现 了 width 和 height， 这 样 的 设置 能 够 缩放 元 素 图 
标 图 形 到 14x14(px) 的 大 小 ， 以 利于 网 页 显示 。 如 果 原 始 图 片 的 大 小 符合 14x14(px) 的 要 求 ， 则 
没有 必要 做 这 一 个 额外 的 样式 描述 。 

(3) 测试 

测试 定制 图 标 时 ， 只 需要 一 个 简单 的 测试 网 页 即 可 。 在 测试 网 页 中 ， 链 接 我 们 用 于 定义 定 
制图 标的 CSS 文件 , 另外 , 在 网 页 中 必须 按照 jQuery Mobile 图 标的 标准 方法 编写 HTML 代码 。 

代码 10.2 是 一 个 简单 的 定制 图 标 测 试 网 页 ， 网 页 代码 中 的 data-icon="library”* 使 用 了 图 标 
名 “libeary”， 即 代码 10.1 中 定义 的 定制 图 标 。 

代码 10.2 ”定制 图 标 测试 网 页 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - custom icons</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
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<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link href="custom-icon-1/custom-icon-01.css" rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 


<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<hl>jQuery Mobile 定制 图 标 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="#" data-role="button" data-icon="library">Library</a> 
</div> 
</div> 
</body> 
</html> 


目前 的 主流 浏览 器 都 能 够 支持 SVG 图 形 。 因 此 ， 把 测试 网 页 在 Chrome 移动 浏览 器 或 者 
Firefox 桌面 浏览 器 中 显示 ，SVG 图 形 (Base64 字符 串 格 式 ) 能 够 正确 显示 在 一 个 按钮 中 ， 成 为 
-个 按钮 的 一 部 分 ， 如 图 10.3 所 示 。 


CE 
jam. webhop me : 
jQuery Mobile 定 制图 标 
Jouery Noble 定制 
€ 园 jam webhop.mejcH tor7C| 鸭 | 三 
= um = 


jQuery Mobile 定 .… 


Library 


10.3 ”SVG 图 标 在 Chrome 移 动 浏览 器 和 Firefox 桌 面 浏览 器 中 正常 显示 


从 这 里 可 以 看 出 ， 只 要 按照 jQuery Mobile 的 要 求 定制 CSS， 自 定义 图 标 能 够 完全 与 系统 
图 标 一 样 使 用 。 在 HTML 文档 中 使 用 自 定义 图 标的 语法 与 使 用 系统 图 标的 语法 相同 。 

但 是 ， 同 一 个 测试 网 页 在 正 8 等 旧版 本 浏览 器 中 就 表现 得 不 太一 样 。 

图 10.4 说 明了 测试 网 页 在 正 8 中 的 实际 状况 。 由 于 正 8 缺少 对 SVG 的 支持 ,jQuery Mobile 
在 把 data-icon=“library” 转 换 为 CSS 类 时 ， 额 外 加 入 了 ui-nosvg 类 ( 见 图 10.4 的 右 下 部 分 )。 

这 样 ， 被 载 入 浏览 器 的 ， 就 不 是 SVG 图 形 ， 而 是 PNG 图 形 ， 从 而 确保 了 网 页 在 不 同 浏览 
器 中 的 兼容 性 。 

以 上 自 定义 图 标的 定义 与 测试 ， 说 明了 由 于 ui-nosvg 类 是 由 jQuery Mobile 自动 添加 的 ， 
因此 ， 在 制作 自 定义 图 标 时 ， 对 PNG 格式 图 标的 声明 不 应 该 遗漏 。 
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(FED [ecm Pe Fmd Deeble Vow oune Mags Cache’ Tools vondowe | Browor Modei TE Doammert Modt YER Stenderds 器 
En wer ro rm |ess |sowe | morier| Evarm 加 
Co 天 | 区 加 | 可 四 上 回 隔 Se Tacesgles Layout Altibutes 

> 回 .ui-bcn-icon-lefc:afcer jquery. nobile-1.4.2.nin.css | 


noboxshadow ui-ao| — 团 position : absolute 


[一 <d 


Text - Text Node| 回 .ui-ben 
<div class="ui-loader ui-coy — 团 1 
i 


es ir bl 

回 .ui-nosvg .ui-icon-library:after cuscom-icon-01.css 
加 background-inage : url(,./images_1/icons-png/0034-1ibrary,png) | 
"J 


让 辐 | | zl 
图 10.4 测试 网 页 在 IE 8 桌面 浏览 器 中 被 jQuery Mobile 自 动 加 入 了 ui-nosvg 类 


10.1.2 ”图标 字符 


图 标的 图 形 格式 从 PNG 向 SVG 的 转变 体现 了 由 于 高 分 辩 率 显示 屏 的 普及 ,以 及 显示 屏 物 
理 分 辨 率 差异 的 加 大 而 对 图 形 缩放 以 后 仍然 能 够 保持 高 品质 的 要 求 。 当 显示 屏 的 大 小 、 分 辩 率 、 
屏幕 布局 等 因素 都 无 法 事先 确定 的 时 候 , 尤其 是 在 一 个 网 站 想 要 充分 发 挥 自 适应 设计 优势 的 时 
候 , PNG 图 形 在 缩放 以 后 的 精度 损失 就 会 与 自 适应 设计 的 本 来 目的 背道而驰 , 而且 这 是 一 个 位 
图 格式 无 法 解决 的 问题 。SVG 矢量 图 能 够 很 好 地 弥补 这 一 缺陷 。 前 面 介 绍 的 jQuery Mobile 1.4 
中 标准 的 图 标 配 置 方法 就 是 采用 了 SVG 图 形 . 除 了 SVG 矢量 图 方法 以 外 ,图 标 字体 (Icon Fonts) 
也 是 一 个 很 有 竞争 力 的 解决 方案 。 

图 标 字 体 既是 一 种 字体 , 也 是 一 个 图 标 。 首先 , 图 标 字 体 是 一 种 字体 ,， 具有 矢量 图 的 特点 ， 
无 极 缩放 以 后 依然 清晰 如 初 。 作 为 字体 ， 它 又 能 够 被 比较 旧 的 浏览 器 (如 正 6) 接受， 兼容 性 较 
好 。 其 次 ， 图 标 字 体 也 是 一 种 图 标 ， 字 体 中 的 字模 由 许多 细小 的 图 形 组 成 。 

作为 SVG 图 形 的 竞争 方案 ， 字 符 图 标 也 有 其 自身 的 不 足 之 处 ， 例 如 只 能 使 用 单 色 图 标 ， 
创建 字模 比较 困难 ， 在 网 页 无 障碍 化 方面 ， 由 于 字符 图 标本 身 具有 的 文字 特性 ， 如 果 使 用 不 当 
会 引起 屏幕 阅读 器 的 误 读 。 由 于 SVG 和 图 标 字体 各 有 其 优 缺 点 ， 在 选择 方案 时 必须 仔细 评估 
业务 需求 和 两 种 方案 的 优 缺 点 。 

下 面 以 常用 的 Font Awesome 和 IcoMoon 为 例 ， 介 绍 图 标 字 体 的 用 法 。 


1. Font Awesome® 


Font Awesome 是 一 套 方便 灵活 的 图 标 字 体 开源 项 目 。 其 各 个 部 分 采用 了 不 同 的 许可 证 %， 


@ Font Awesome 项 目 网 站 : http://fortawesome.github.io/Font-Awesome/。 

@ 不 同 的 开源 许可 证 在 允许 自由 使 用 软件 的 同时 ， 有 时 还 会 有 特殊 规定 ， 例 如 ，CC BY 3.0 许可 证 要 求 提供 
一 个 指向 这 个 许可 证 的 链接 。 本 书 作 者 将 说 明 每 一 种 软件 的 授权 方式 。 由 于 相同 的 许可 证 被 很 多 开源 软件 采用 ， 
为 了 避免 重复 ， 本 书 对 某 一 个 许可 证 的 链接 只 提供 一 次 。 
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例如 字体 部 分 采用 SIL OFL 1.1 许可 证 ?”， 代 码 部 分 采用 MIT 许 可 证 >， 文 档 部 分 采用 CC BY 3.0 
许可 证 9。 这 套 字 体 包含 了 超过 500 个 图 标 ， 支 持 CSS 控 制 字 体 的 显示 样式 。Font Awesome 中 
的 图 标 分 为 以 下 几 类 : 常规 网 页 图 标 、 交 通 运输 图 标 、 性 别 图 标 、 文 件 类 型 图 标 、 旋 转 图 标 、 
表单 控件 图 标 、 付 费 图 标 、 图 表 图 标 、 货 币 图 标 、 文 本 编辑 器 图 标 、 方 向 图 标 、 视 频 播放 器 图 
标 、 品 牌 图 标 ， 以 及 医疗 图 标 。 如 果 浏 览 器 中 安装 了 Adblock Plus 等 广告 过 滤 插 件 ， 在 这 些 图 
标 中 ， 品 牌 图 标 可 能 无 法 正确 显示 。 

图 10.5 ~ 10.18 分 别 展示 各 类 别 中 一 些 非常 典型 的 图 标 。 


二 anchor las area-chart 
@at @ban 
别 barcode bm bed 
局 book 合 briefcase 
国 calculator 的 calendar 
w check 四 check-circle 
O circle-o © circle-thin 
< code 至 coffee 
© copyright BB credit-card 
咏 cubes Bt desktop 
区 edit 回 envelope-o 
A exclamationtiangle 电 eye 
因 file-pdfo 国 file-word-o 
中 fire flaog 
® frown-o 四 gamepad 
@ globe @ headphones 
bum hotel @ inbox 
Q key 色 language 
3 levehHdown 了 levelHup 
tw mailforward 和 mailreply 
to microphone 0 mobile 
月 music 三 navicon 
pencil 区 pencilsquare-o 
@ pie-chart X plane 
© power-off B&B print 
2 random recycle 
Nrss 室 search 
v shield EE shopping-cart 
ll Signal 霹 sitemap 
1$ sort-alpha-asc x sort-alpha-desc 
人 sort-asc vw Sort-desc 
会 star 家 star-half-o 
O tablet ®tag 
© thumbs-0-down 四 thumbs-o-up 
© toggle-off © toggle-on 
量 trophy 二 tuck 
wh unlock 全 upload 
中 volume-down 啦 volume-up 
10.5 
园 ambulance Fb bicycle 
A plane #4 rocket 
加 ta B train 
10.6 


沁 arows 
便 bank 

处 bell 

@ bulseye 
QB camera 
check-square 
X close 

疗 cog 

好 crop 

© diamond 
S eraser 
哈 fax 

因 file-zip-o 
$flash 

而 gear 


和 Pheart 

iinfo 

已 laptop 

@ lfe-ring 

%% mail-reply-all 
加 money 
newspaper-o 
4 phone 

闫 plug 

器 qrcode 

D refresh 

时 server 

员 sigr-in 

© smileo 

I sort-amount-asc 
fspoon 

是 streetview 
至 tasks 


和 硬 User 
点 wheelchair 


常规 网 页 图 标 


员 bus 
鲁 ship 
砚 truck 


交通 运输 图 标 


宁 asterisk 
地 bar-chart 
Fb bicycle 
员 bus 

全 car 
chid 
cloud 

9 comment 
加 cube 

二 download 
! exclamation 
file-image-o 
园 fiIm 
folder-o 
痊 gif 


得 home 

便 institution 

我 legal 

@ lock 

8 map-marker 
& moon-o 

A paper-plane-o 
photo 

田 plus-square-o 
? question 

A road 

3 share-square-o 
四 sign-out 

令 5Soft 

QF sortamountdesc 
口 square-o 

©Q sun-o 

本 ta 

@ tint 

碌 tree 

他 umbrella 

BW video-camera 
从 wifi 


car 
国 subway 
鲍 wheelchair 


@ OFL 1.1 开源 字体 许可 证 : http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL。 
@ MIT 许可 证 : http://opensource.org/licenses/mit-license.html。 
@ CC BY 3.0 许可 证 : http://creativecommons.org/licenses/by/3.0/。 
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重 male 


业 file 
file-image-o 
和 file-text 


© circle-o-notch 


check-square 
© minus-square-o 


国 cc-amex 
四 cc-visa 


laa area-chart 


Bbtc 
¥ jpy 


各 align-center 
WB clipboard 
Dfile-o 

T italic 

9 paragraph 
国 table 


¥ angle-double-down 
@ arrow-circle-left 

回 caretsquare-o-down © chevron-circle-right 
4 long-arrow-down 


44 backward 
Wp forward 


NM step-backward 
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和 驮 female C mars 
图 10.7 性别 图 标 
file-archive-o 国 file-code-o 
Difile-o 因 file-pdfo 
file-text-o 网 file-video-o 
10.8 文件 类 型 图 标 
次 cog DS refresh 


10.9 ”旋转 图 标 


O circle-o 
国 square 


区 check-square-o 
® plus-square-o 


10.10 ”表单 控件 


加 cc-discover 
丑 creditcard 


10.11 付费 图 标 


ll bar-chart lw line-chart 
10.12 图 表 图 标 
€eur £ gbp 
回 money Prub 
10.13 ”货币 图 标 
B bold % chain 
多 copy < cut 
floppy-o A font 
% link 于 outdent 
BD paste C repeat 
TI text-height U underline 


10.14 文本 编辑 器 图 标 


< angle-double-left > angle-right 
©@ arow-circle-o-up VY arrow-down 
€ chevron-left 


+ long-arrow-left 


10.15 方向 图 标 


会 eject HK fast-backward 
WM pause P play 
M step-forward FC a stop 


10.16 ”视频 播放 器 图 标 


ES cc-mastercard 
大 google-wallet 


= long-arrow-right 


@ venus 


国 file-excelo 
国 file-powerpoint-o 
file-word-o 


2 spinner 


© dot-circle-o 
口 square-o 


图 cc-paypal 
P paypal 


@ pie-chart 


inr 
S$ usd 


$5 chain-broken 
eraser 

至 indent 

® paperclip 
Save 

DD undo 


~ angle-up 

» caret-right 
hand-o-right 
1 long-arrow-up 


Ml fastforward 
© play-circle-o 
四 youtube-play 
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虽 android 三 apple B bitcoin 加 cc-amex 
BB cc-discover 图 ccmastercard 有 cc-paypal 四 ccvisa 
司 css3 de digg 等 dropbox @ drupal 
f facebook my facebook-official 四 fickr git git 
© github g google 8& google-plus 鄙 google-wallet 
目 html5 instagram 时 joomla © jsfiddle 
in linkedin A linux M medium B paypal 
熏 qq WW rebel reddit 0 renren 
吧 share-alt © skype < soundcloud wp steam 
加 twitter ¥ viacoin @o weiin © whatsapp 
吴 windows 羡 wordpress Y yahoo 四 youtube-play 
图 10.17 品牌 图 标 
国 ambulance h-square Pheart S hearto 
国 hospitaLo WB medkit plus-square 点 wheelchair 


10.18 ”医疗 图 标 


这 样 的 分 类 只 是 从 大 体 上 表明 图 标的 用 途 ， 有 一 些 图 标 分 别 属于 两 个 类 别 ， 比 如 
ambulance( 救 护 车 ) 属 于 交通 运输 和 医疗 两 个 类 别 。 这 些 图 标的 名 称 也 很 有 规律 ，“-o” 表 示 空 
心 图 形 ，“-square” 表 示 图 标 图 形 中 带 有 方 枉 ，“-circle” 表 示 图 标 图 形 中 带 有 圆 环 。 一 些 图 
标 附带 有 别名 ， 比 如 “weixin”( 微 信 ) 的 别名 是 “wechat”，“btc”( 比 特 币 ) 的 别名 是 “bitcoin” 
等 。 图 标的 分 类 能 够 帮助 网 站 设计 者 查找 使 用 的 图 标 ， 在 使 用 时 ， 只 需要 用 到 图 标的 名 称 。 

在 网 页 中 使 用 Font Awesome 中 的 图 标 与 使 用 jQuery Mobile 图 标的 标准 方法 不 同 。 

代码 10.3 演示 了 Font Awesome 图 标 集 的 基本 使 用 方法 。 


代码 10.3 ”Font Awesome 字 符 图 标 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - icon fonts</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<!- 引用 Font Awesome 的 Css --> 
<link href="IconFonts/font-awesome-4.3.0/css/font-awesome.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
a> span { 
margin-left: 3px; 
margin-right: 3px; 
} 
</style> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
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<hl>Font Rwesome</h1> 
</div> 
<div class="ui-content" role="main"> 
<form> 
<a href="#" data-role="button"> 
<!- 通过 Font Awesome 的 css 类 引用 字符 图 标 --> 
<span class="fa fa-qrcode"></span> 
<span> 条 形 码 </span> 
</a> 
<a href="#" data-role="button" data-inline="true"> 
<span class="fa fa-coffee"></span> 
<span> 咖 啡 </ span> 
</a> 
<fieldset data-role="controlgroup"> 
<label for="cc-amex"> 
<span class="fa fa-cc-amex"></span>g&nbsp;Amex 
</label> 
<input type="radio" name="cc" value="cc-amex" id="cc-amex"> 
<label for="cc-visa"> 
<span class="fa fa-cc-visa"></span>gnbsp;Visa 
</label> 
<input type="radio" name="cc" value="cc-visa" id="cc-visa"> 
<label for="cc-mastercard"> 
<span class="fa fa-cc-mastercard"></span> 
&nbsp;Mastercard 
</label> 
<input type="radio" name="cc" value="cc-mastercard" 
id="cc-mastercard"> 
</fieldset> 
</form> 
</div> 
</div> 
</body> 
</html> 


在 网 页 中 使 用 Font Awesome 字符 图 标 必须 引用 Font Awesome 的 CSS。CSS 是 Font 
Awesome 字符 图 标 被 网 页 引用 的 途径 。Font Awesome 的 CSS 还 能 够 对 图 标的 显示 做 更 进一步 
的 控制 。 至 少 两 个 最 基本 的 类 必须 出 现 ，“fa” 和 以 “fa-” 为 前 级 , 后 接 图 标 名 称 的 类 。 图 10.5 
到 图 10.18 中 ， 已 经 列举 了 相当 多 的 图 标 名 称 。 读 者 可 以 从 Font Awesome 网 站 找到 全 部 图 标 
的 名 称 。 在 代码 10.3 中 ,一 个 jQuery Mobile 网 页 中 出 现 了 一 个 普通 按钮 ， 一 个 被 设置 为 inline 
的 按钮 ， 和 一 组 单 选 按钮 。 这 些 UI 组 件 中 的 按钮 都 是 由 Font Awesome 提供 的 。 当 需要 使 用 图 
标 时 ， 在 网 页 中 插入 <i> 或 者 <span> 元 素 (根据 HTML 5 语法 规则 ， 使 用 <span> 元 素 更 为 恰当 )， 
并 把 上 述 两 个 必需 的 CSS 类 赋予 图 标的 容器 。 例 如 ， 在 <span class="fa fa-coffee”*></span> 中 ， 
<span> 是 图 标的 容器 ,fa 是 一 个 必须 添加 的 CSS 类 , fa-coffee 是 由 前 级 “fa-” 加 上 图 标 名 “coffee” 
组 成 的 。 当 一 个 容器 被 添加 了 上 述 两 个 CSS 类 以 后 ， 在 网 页 中 就 会 显示 与 图 标 名 “coffee” 相 
匹配 的 图 标 ， 如 图 10.19 所 示 。 
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图 10.20 显示 了 一 组 6 个 图 标 。 这 些 不 同 大 小 的 图 标 都 来 源 于 同一 个 字符 图 标 。 当 在 网 页 
中 通过 CSS 声明 一 个 图 标 时 ， 另 外 添加 一 个 CSS 类 ， 比 如 “fa-lg”、“ 角 -3x”、“fa-5x” 等 。 
lg 表示 字符 大 小 为 1.33em，3x 和 5x 分 别 表示 字符 大 小 为 3em 和 5em。 


Iam webhop me Jam webhop me 
Font Awesome Font Awesome 
加 条形码 加 
Ei 
里 明峰 eg 
[5 
Amex 日 口 
OR 
四 va 
口 口 
四 Mastercard 口 mm 


图 10.19 在 jQuery Mobile 网 页 中 使 用 图 10.20 ”放大 字符 图 标 不 会 有 损 图 形 质量 
Font Awesome 字 符 图 标 


代码 10.4 演示 了 通过 CSS 类 实现 增 大 字符 图 标的 方法 。 
代码 10.4” 通 过 CSS 增 大 字符 图 标 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - icon fonts</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link href="IconFonts/font-awesome-4.3.0/css/font-awesome.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<hl>Font Rwesome</h1> 
</div> 
<div class="ui-content" role="main"> 
<p><span class="fa fa-qrcode"></span></p> 
<p><span class="fa fa-qrcode fa-lg"></span></p> 
<p><span class="fa fa-qrcode fa-2x"></span></p> 
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<p><span class="fa fa-qrcode fa-3x"></span></p> 
<p><span class="fa fa-qrcode fa-hx"></span></p> 
<p><span class="fa fa-qrcode fa-5x"></span></p> 


</div> 
</div> 
</body> 
</html> 


读者 可 能 已 经 注意 到 了 , 在 图 10.5 到 图 10.18 中 的 图 标 
并 没有 对 齐 。 这 是 由 于 每 一 个 图 标的 形状 和 大 小 都 不 一 样 造 
成 的 ， 例 如 “taxi” 很 宽大 而 “sort” 很 细小 。Font Awesome 
的 CSS 类 “fa- 多 ”能够 解决 这 个 问题 。 它 把 所 有 的 图 标 设 
置 为 相同 的 宽度 ， 这 样 非常 有 利于 对 齐 。 如 图 10.21 所 示 ， 
下 面 的 代码 片段 显示 了 两 组 图 标 ， 第 一 组 没有 采用 等 宽 方 
式 ， 第 二 组 采用 了 “了 fa- 多 ”把 图 标 设置 为 相同 的 宽度 ， 因 此 
第 二 组 中 的 两 个 图 标 和 图 标 后 面 的 文字 都 能 够 准确 对 齐 : 


<p> 
<span class="fa fa-bicycle"></span> 
&nbsp;<span>bicycle</span> 

</p> 

<p> 
<span class="fa fa-bus"></span> 
&nbsp;<span>bus</span> 

</p> 

<br> 

<p> 
<span class="fa fa-bicycle fa-fw"></span> 
&nbsp;<span>bicycle</span> 

</p> 

<p> 
<span class="fa fa-bus fa-fw"></span> 
&nbsp;<span>bus</span> 

</p> 


图 10.21 


Fo bicycle 
民 bus 


Fb bicycle 
网 bus 
图 标的 等 宽 显 示 和 对 齐 


图 10.9 中 包括 了 4 个 旋转 图 标 。 这 4 个 图 标 确实 可 以 在 网 页 上 实现 旋转 , 只 要 在 声明 图 标 
的 时 候 加 入 CSS 类 “fa-spin” 即 可 。 旋 转动 画 采 用 了 CSS3 的 动画 特性 ， 
支持 CSS 3 动画 特性 的 浏览 器 上 得 到 动画 效果 。 这 个 功能 兼容 性 受到 浏览 器 版 本 的 制约 。 


2. IlcoMoon 


因此 无 法 在 正 9 等 不 


IcoMoon 是 另外 一 种 相当 流行 的 图 标 。 它 以 免费 版 、 商 业 版 、 应 用 程序 等 不 同 的 版 本 和 不 


同 的 下 载 方式 发 布 软件 。 


IcoMoon 的 图 标 集 包 括 了 SVG、PNG， 以 及 字符 图 标 等 多 种 格式 。 在 本 章 的 10.1 节 中 的 定 
制图 标 实例 就 是 利用 了 IcoMoon 的 免费 图 标 集 。 这 套 免费 的 图 标 集 采 用 了 CC BY 4.02 和 GPL? 


@ CC BY 4.0 许可 证 : http://creativecommons.org/licenses/by/4.0。 
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许可 证 方式 授权 。IcoMoon 免 费 图 标 集 软件 包 中 的 CSS 文 件 用 于 图 标 演示 ， 而 不 是 为 网 页 设计 
者 单独 提供 的 ， 它 会 与 我 们 设计 的 网 页 ， 尤 其 是 与 jQuery Mobile 中 的 一 些 样式 引起 冲突 ， 我们 
建议 通过 IcoMoon 的 在 线 应 用 程序 定制 下 载 需要 的 图 标 。 

下 面 介 绍 在 移动 网 页 中 使 用 IcoMoon 图 标 ， 从 定制 下 载 到 测试 的 完整 过 程 。 

(1) 进入 “IcoMoon App” 

从 IcoMoon 主页 (icomoon.io) 的 右上 方 点 击 IcoMoon App， 进 入 IcoMoon 定制 下 载 页 面 。 
图 10.22 是 进入 IcoMoon App 前 后 的 画面 。 


https /comoon,lo 2” 


G@)icoMoon 


Custom built and crispicon fonts, 


咬 IcoMoon App 


Browse 4000+ free vector icons 


¥ Custom & ciisp icon font generator 


IcoMoon App - Icon Fonk &s x 


aa © @ htps://icomoon.io) t 


EE +s 
Ah 


> Linecons 


AddlconsFromLibrary 


Selection 


图 10.22 进入 IcoMoon App 


进入 IcoMoon App 以 后 ,屏幕 上 会 出 现 被 预先 选择 的 图 标 集 。IcoMoon App 能 够 保留 上 一 
次 操作 的 状态 ， 因 此 ， 每 一 次 进入 IcoMoon App 看 到 的 图 标 集会 有 所 不 同 。 


@ GPL 许可 证 : http://www.gnu.org/licenses/gpl.html。 
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(2) 选择 图 标 集 ( 库 ) 

如 果 我 们 需要 的 图 标 集 没 有 被 包括 ， 可 以 通过 Add Icons From Library( 从 图 标 库 中 增加 图 
标 ) 链 接 选 择 需 要 的 图 标 集 。 图 10.22 的 第 二 幅 画面 显示 已 经 有 两 个 图 标 集 被 选择 ， 当 点 击 Add 
Icons From Library 进入 图 标 集 选 择 页 面 时 ， 可 以 看 到 以 上 两 个 图 标 集 已 经 被 打 勾 ， 表 示 已 经 被 
包括 在 当前 的 IcoMoon App 项 目 中 。 如 果 我 们 想 把 Font Awesome 中 的 图 标 也 通过 IcoMoon 包 
含 进 来 ， 需 要 先 在 图 标 集 选择 页 面 中 找到 Font Awesome 图 标 集 ， 然 后 点 击 图 标 集 下 方 的 Add 
加 入 到 当前 项 目 中 ， 如 图 10.23 所 示 。 


@ icoMoon App- leon Font &: x 
€ 3 © | htps://comoon.io/app/#/select/ibrar 


下 Library 


Font Awesome Material Desigr Icons 
Glyphs Available 479 Glyphs Available 757 
Gridsiz 14 crid size 24 
Dave Gandy es Google 
CPL/CCBY40 icense CCBYSA40 


Add 


Selection 


10.23 ”把 Font Awesome 图 标 集 加 入 到 当前 的 lcoMoon App 项 目 中 


(3) 选择 图 标尺 十 

当 一 个 图 标 集 被 加 入 到 当前 项 目 中 以 后 ，IcoMoon App 返回 应 用 程序 主页 面 。 新 增加 的 图 
标 集 显 示 在 当前 的 图 标 集 列表 中 。 

每 一 个 图 标 集 的 右面 都 有 一 个 “眼睛 ”图 标 ， 如 图 10.24 所 示 ， 它 是 指 通 过 IcoMoon App 
项 目 定制 下 载 的 每 一 个 图 标 集中 的 图 标尺 寸 。 由 于 每 一 个 图 标 集 采 用 的 网 格 大 小 不 同 ， 我 们 会 
经 常见 到 14 与 14 的 整数 倍 ， 或 者 16 与 16 的 整数 倍 。 通 常 ， 我 们 在 jQuery Mobile 网 页 中 使 
用 的 图 标 需要 14 或 者 16。 


> Font Awesome @ 二 
> lcoMoon - Free 32 多 三 


> Linecons nm. 三 


Add lcons From Library... 


10.24 选择 图 标尺 十 
(4) 选择 图 标 
IcoMoon App 可 以 帮助 我 们 在 当前 项 目 中 所 包括 的 图 标 集 中 选择 我 们 需要 的 图 标 ， 也 可 以 
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通过 搜索 方式 在 更 大 的 范围 中 选择 图 标 。 

在 IcoMoon App 主页 面 的 左上 方 ( 见 图 10.22) 有 一 个 搜索 框 ， 当 我 们 输入 查询 条 件 后 ， 搜 
索 会 自动 进行 ， 并 在 同一 个 页 面 中 返回 搜索 结果 ， 搜 索 范 围 并 不 限于 当前 被 包括 的 图 标 集 ， 如 
图 10.25 所 示 为 按照 查询 条 件 “Android” 得 到 的 结果 。 


加 Imwoom ap -ImnFantes x 
所 C https:/icomooniio/app/#/select 


二 出 Importlcons 


Q Android 


~v Font Awesome 


和 
Y lcoMoon - Free 
多 


> Linecons 


Gresults from other packs 
~ lcoMoon - Ultimate 


得 
大 Cenerate SVG Selection Cenerate Font F 


10.25 ”IcoMoon App 从 更 大 的 搜索 范围 查找 用 户 需 要 的 图 标 
用 户 也 可 以 不 通过 搜索 ， 而 是 直接 展开 每 一 个 图 标 集 ， 从 图 标 集中 直接 通过 单 击 选取 ， 如 
图 10.26 所 示 。 


园 IcoMoon spp-IonFontes x 
€ SC htps//comoon.io/app/#/select 


Y IcoMoon - Free 多 三 


加 国 国 网 园 园 园 园 园 园 |[z| 罗 国 加 区 


:+ 


3 Generate SVG Selection Cenerate Font 下 


10.26 直接 从 当前 项 目 包 含 的 图 标 集中 选取 图 标 


如 果 用 户 不 能 确定 需要 哪 一 个 图 标 ， 也 可 以 选择 一 个 或 者 整个 图 标 集 中 的 全 部 图 标 。 
如 图 10.27 所 示 ， 在 每 一 个 图 标 集 条 目的 右 端 有 一 个 菜单 按钮 。 
展开 菜单 ， 单 击 Select All / None， 这 个 菜单 项 的 作用 是 在 “选择 当前 图 标 集 里 的 全 部 
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图 标 ， 或 者 取消 全 部 被 选择 的 图 标 ” 之 间 切 换 。 


加 icomoon app -IconFont&s x 


> 


© | @ https:;//icomoon.io/app/#/select 


+ Import Icons 


Q search 


v Font Awesome 


岗 Cenerate SVG Selection 


10.27 选择 图 标 集中 的 全 部 图 标 


全 


Getlnfo © 
Importto Set 由 
Move Up B+ 
Move Down Bi 
ne 说 
Download JSON 由 


Select All/ 


Copy Selection to Set 种 
Remove Set 四 
~ 


也 =A 


Generate Font 天 


重复 图 10.27 中 的 方法 , 我 们 可 以 选择 Font Awesome 和 IcoMoon - Free 两 个 图 标 集 中 的 全 


部 图 标 。 
(5) 下 载 定制 的 图 标 


IcoMoon 支持 把 被 选择 的 图 标 转换 为 SVG 格式 和 图 标 字 符 格 式 。 当 我 们 选择 完成 全 部 需 
要 的 图 标 以 后 ， 单 击 Generate Font 创建 图 表 字 符 格式 的 下 载 包 ， 如 图 10.28 所 示 。 当 IcoMoon 
创建 下 载 包 以 后 ，Generate Font 按钮 自动 变 成 Download 按钮 ， 如 图 10.29 所 示 。 这 时 用 户 可 
以 下 载 定 制 的 图 标 软件 包 到 本 地 计算 机 。 图 标 选择 和 定制 下 载 过 程 到 此 完成 。 


一 
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10.28 ”把 选择 的 图 标 转换 成 图 标 字体 并 创建 下 载 包 


器 joomla 外 language 
而 SVG Selection 
图 10.29 下 载 图 标 字体 软 件 包 
(6) 测试 


Font 
Download 


从 IcoMoon App 中 下 载 的 软件 包 文件 名 为 icomoon.zip。 展 开 这 个 文件 ， 其 中 包含 了 用 于 


应 用 图 标的 CSS 文件 。 
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代码 10.5 与 代码 10.3 非常 相像 。 但 是 ， 代 码 10.5 使 用 了 从 IcoMoon App 下 载 的 定制 图 标 
集 。 这 个 图 标 集 软件 包 中 包含 了 IcoMoon 免费 版 图 标 集 和 Font Awesome 图 标 集中 的 图 标 。 
从 IcoMoon App 下 载 的 图 标 集 使 用 IcoMoon 默认 的 命名 惯例 ， 每 一 个 图 标的 CSS 类 前 级 


都 是 “icon-”。 
代码 10.5 ”IcoMoon 字 符 图 标的 使 用 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - icon fonts</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link hre: IconFonts/IcoMoon custom download/style.css" rel="stylesheet" /> 
<meta name="viewport" content="width=device-width, initial-scale=l1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<hl>Font Rwesome</h1> 
</div> 
<div class="ui-content" role="main"> 
<form> 
<a href="#" data-role="button"> 
<span class="icon-library"></span> 
<span> 图 书馆 </span> 
</a> 
<a href="#" data-role="button" data-inline="true"> 
<span class="icon-magic-wand"></span> 
<span> 魔 法 棒 </span> 
</a> 
<fieldset data-role="controlgroup"> 
<label for="cc-amex"> 
<span class="icon-cc-amex"></span>&nbsp;Amex 
</label> 
<input type="radio" name="cc" value="cc-amex" 
id="cc-amex"> 
<label for="cc-visa"> 
<span class="icon-cc-visa"></span>gnbsp;Visa 
</label> 
<input type="radio" name="cc" value="cc-visa" id="cc-visa"> 


<label for="cc-mastercard"> 
<span class="icon-cc-mastercard"></span> 
&nbsp;Mastercard 
</label> 
<input type="radio" name="cc" value="cc-mastercard™" 
id="cc-mastercard"> 
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</fieldset> 
</form> 
</div> 
</div> 
</body> 
</html> 
在 移动 设备 上 测试 上 述 代 码 ， 得 到 如 图 10.30 所 示 的 效果 。 显 示 效 果 达 到 了 扩充 jQuery 
Mobile 图 标 集 的 目的 。 


10.30 在 jQuery Mobile 网 页 中 使 用 通过 IcoMoon App 定 制 下 载 的 图 标 


10.2 网 页 切换 过 渡 效 果 扩 展 


jQuery Mobile 框架 已 经 预定 义 了 许多 网 页 切换 过 渡 效 果 。 这 些 过 渡 动 画 效果 是 由 CSS 3 
的 @keyframes 规则 (参见 本 书 3.4.4 小 节 “ 动 画 效 果 ”) 来 实现 的 。 因 此 ， 只 要 熟悉 CSS 3 动画 
效果 的 实现 方法 ， 定 制 网 页 切换 效果 并 不 是 很 困难 。 然 而 ， 有 几 个 方面 必须 在 开发 新 的 页 面 切 
换 效果 之 前 仔细 考虑 。 

(1) 不 可 过 度 依赖 移动 设备 上 的 图 形 加 速 器 , 因为 Apple 设备 上 图 形 加 速 功能 在 别 的 移动 
设备 上 并 不 完全 具备 。 过度 依赖 移动 设备 上 的 图 形 加 速 器 来 达到 非常 复杂 的 切换 效果 往往 会 造 
成 很 大 的 网 页 性 能 问题 。 

(2) 避免 在 深 色 网 页 之 间 使 用 过 多 的 动画 效果 。 由 于 在 目前 条 件 下 CSS 3 动画 的 实现 方法 
在 不 同 的 浏览 器 上 也 有 比较 大 的 差异 ， 一 些 动画 效果 会 造成 动画 短暂 停滞 、 白 屏 ， 或 者 屏幕 闪 
烁 等 问题 ， 应 该 尽量 使 用 jQuery Mobile 框架 提供 的 切换 效果 ， 这 些 切换 效果 在 不 同 移动 平台 
上 测试 过 ， 能 够 保障 最 大 的 稳定 性 和 兼容 性 。 

网 页 切换 涉及 到 两 个 页 面 ， 这 两 个 页 面 可 能 是 同一 个 HTML 文件 的 两 个 页 面 ， 或 者 是 同 
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-个 网 站 中 能 够 通过 Ajax 调用 的 另 一 个 HTML 文件 。 网 页 切换 需要 同时 考虑 它 的 逆 过 程 ， 即 
当 用 户 按 下 “返回 ”按钮 以 后 ， 一 个 页 面 如 何 切 换 回 到 原来 的 页 面 。 网 页 切换 有 正 向 和 反 向 两 
个 过 程 。 其 中 ， 任 何 一 个 过 程 都 还 可 以 被 分 解 成 两 个 步骤 ， 即 现 有 的 页 面 移出 和 新 的 页 面 移入 
浏览 器 窗口 。 

以 代码 10.6 为 例 , 这 段 代 码 产 生 了 一 个 名 为 effect01 的 网 页 切换 过 渡 动 画 效 果 。 这 个 过 渡 
效果 与 jQuery Mobile 中 单一 动作 的 动画 效果 不 同 ， 它 是 由 两 个 动作 组 成 的 。 当 网 页 切换 开始 
时 , 浏览 器 中 的 网 页 缩小 , 并 同时 向 浏览 器 底部 移动 (out), 新 的 页 面 从 浏览 器 的 底部 向 上 移动 ， 
直到 完全 填充 浏览 器 窗口 (in)， 反 向 过 渡 过 程 与 此 相反 。 

代码 10.6 ”定制 页 面 切换 效果 


-effectOl.in { 


-webkit-transform: translateY (0%); 
-moz-transform: translateY (0%); 
-webkit-animation-name: slideUp; 
-moz-animation-name: slideUp; 

} 

@-webkit-keyframes slideUp { 
from { 


—webkit-transform: translateY (100%); 
} 
to { 
-webkit-transform: translateYy (0%); 
} 
} 
@-moz-keyframes slideUp { 
from { 
-moz-transform: translateY (100%); 
} 
to 量 
-moz-transform: translateY (0%); 
} 
下 
-effect0l.out { 
—webkit-transform: translateY (100%); 
-moz-transform: translateYy (100%); 
-webkit-animation-name: slideDown zoomOut; 
-moz-animation-name: slideDown zoomOut; 
} 
@-webkit-keyframes slideDown zoomOut { 
from { 
—webkit-transform: translateY (0%); 
| 
to { 
—webkit-transform: translateY (100%); 
—webkit-transform: scale(0.2,0.2); 
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} 


@-moz-keyframes slideDown zoomOut { 


from 


to 


} 


{ 


-moz-transform: translateYy (0%); 


-moz-transform: translateY (100%); 
transform: scale(0.2,0.2); 
-ms-transform: scale(0.2,0.2); 


.effect01 .in.reverse { 


-webkit-transform: 
-moz-transform: 
-webkit-animation: 


-moz-animation: 


} 


translateY (100%); 
translateYy (100%); 
slideUp zoomIn 0.3s; 
slideUp zoomIn 0.3s; 


@-webkit-keyframes slideUp zoomIn { 


from 


to 


} 


. 


-webkit-transform: translateY (100%); 
-webkit-transform:scale (0.2,0.2); 


-webkit-transform: translateY (0%); 
-webkit-transform:scale (1,1); 


@-moz-keyframes slideUp zoomIn { 


from 


to 


} 


-moz-transform: translateY (100%); 
transform:scale (0.2,0.2); 
-ms-transform:scale (0.2,0.2); 


-moz-transform: translateY (0%); 
transform:scale (1,1); 
-ms-transform:scale (1,1); 


-effect01.out.Ieverse { 


—webkit-transform: 
-moz-transform: 
—webkit-animation: 
-moz-animation: 


} 


translateY (0%); 
translateY (0%); 
slideDown 0.3s; 
slideDown 0.3s; 


@-webkit-keyframes slideDown { 


from 


{ 


—webkit-transform: translateYy (0%); 
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—webkit-transform: translateYy (100%); 


Q@-moz-keyframes slideDown { 


from { 
-moz-transform: translateY (0%); 
} 
to { 
-moz-transform: translateY (100%); 
} 


} 


页 面 切换 效果 的 两 个 过 程 和 每 一 个 过 程 中 的 两 个 步骤 都 是 由 CSS 3 定义 的 。 全 部 4 个 步骤 
按照 下 面 的 命名 惯例 定义 : 
.effect01.in 


.effect01.out 
.effect01 .in.reverse 


.effect01.out.reverse 


其 中 的 effect01 指 过 渡 动 画 效果 的 名 称 ，in 指 网 页 进入 浏览 器 的 步骤 ，out 指 网 页 从 浏览 
器 离开 这 一 步骤 ，reverse 指 反 向 过 程 ， 如 果 定 义 中 没有 声明 reverse， 则 是 指正 向 过 渡 过 程 。 
每 一 个 过 程 都 对 应 了 一 个 由 @keyframes 定义 的 动画 过 程 。 每 一 个 动画 过 程 都 是 由 from 和 to 定 
义 动画 的 起 始 和 结束 状态 。 

最 后 利用 一 个 类 似 代码 10.7 那样 的 简单 测试 网 页 检验 网 页 切换 动画 在 浏览 器 中 的 实际 
效果 。 


代码 10.7 ”测试 页 面 切换 效果 的 样本 网 页 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - custom transition</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link href="custom-transition/custom-transition.css" rel="stylesheet"/> 
<meta content="width=device-width, initial-scale=1.0" name="viewport"> 


<style> 
.PNum { 
font-size: 48px; 
text=aliqgn: centers 
} 
</style> 
</head> 
<body> 
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<div data-role="page" id="pl" data-theme="a"> 
<div data-role="header"> 
<h1> 第 一 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div class="pNum">1</div> 
<div> 
<a href="#p2" data-role="button" 
data-transition="effect01"> 第 二 页 </a> 
</div> 
</div> 
</div> 
<div data-role="page" id="p2" data-theme="a"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 第 二 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div class="pNum">2</div> 
</div> 
</div> 
</body> 
</html> 


10.3 ”UI 组 件 扩展 


jQuery Mobile 和 jQuery UI 都 是 以 jQuery 为 基础 的 框架 ， 两 套 框架 都 提供 了 大 量 的 UI 组 
件 。 本 书 的 第 8 章 和 第 9 章 讲解 了 jQuery Mobile 中 大 多 数 民 组件 的 主要 使 用 方法 。 

比较 jQuery Mobile 和 jQuery UI 两 套 框架 中 的 UI 组 件 , 就 会 发 现 很 多 由 jQuery UI 提供 的 
实用 UI 组 件 在 jQuery Mobile 中 还 没有 提供 。 

虽然 这 些 UI 组 件 已 经 计划 被 移植 到 jQuery Mobile 2.0 中 ， 但 是 目前 ， 通 过 常规 途径 还 无 
法 使 用 。 作 为 替代 方案 ， 现 在 已 经 有 一 些 方法 能 够 帮助 我 们 利用 现 有 的 jQuery UI 中 的 组 件 来 
弥补 jQuery Mobile 的 不 足 。 

本 节 将 介绍 怎样 在 jQuery Mobile 中 实现 拖 动 和 日 历 功能 。 需 要 注意 的 是 ， 这 些 方法 与 
jQuery Mobile 框架 的 依赖 程度 并 不 紧密 ， 不 应 该 被 看 作 jQuery Mobile 的 插件 。 这 些 方法 都 是 
利用 了 jQuery UI 的 功能 ， 尤 其 是 拖 动 功能 ， 必 须 直 接 引 用 jQuery UI 框架 的 JavaScript 文件 ， 
这 就 造成 了 jQuery UI 与 jQuery Mobile 框架 的 潜在 冲突 ， 因此， 需要 谨慎 地 使 用 这 一 类 型 的 方 
案 ， 并 尽量 避免 在 整个 网 站 中 全 局 性 地 使 用 ， 而 是 应 该 把 相关 方案 所 使 用 的 JavaScript 和 CSS 
限定 在 某 些 必须 使 用 这 些 功 能 的 页 面 中 。 


10.3.1 拖 放 功能 
HTML 5 新 增加 了 draggable 属性 ， 使 一 个 UI 元 素 在 浏览 器 中 能 够 通过 鼠标 拖 动 到 另外 的 
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位 置 。 由 于 在 移动 设备 触摸 屏 上 的 touch 事件 不 同 于 鼠标 事件 , 目前 在 jQuery Mobile 网 页 中 的 
拖 动 功能 还 无 法 通过 常规 方式 运行 。 

jQuery UI Touch Punch 是 一 个 能 够 把 移动 设备 上 的 Touch( 触 摸 ) 事 件 映射 成 为 鼠标 事件 ， 使 
用 户 能 够 在 触摸 屏 上 模拟 键盘 和 鼠标 操作 的 开源 项 目 ?, 采用 MIT 和 GPL v2 许可 证 ?授权 方式 。 
Touch Punch 与 jQuery UI 紧密 相连 ， 在 使 用 Touch Punch 时 ， 需 要 同时 引用 jQuery UI 和 Touch 
Punch 的 JavaScript 文 件 ， 并 且 ， 拖 动 功能 的 编程 方法 也 与 jQuery UI 中 的 相关 方法 相似 。 下 面 演 
示 两 个 在 jQuery Mobile 网 页 中 使 用 拖 动 功能 的 实例 。 

代码 10.8 使 用 了 jQuery UI 的 draggable0 方 法 ， 使 浏览 器 中 的 UI 元 素 能 够 被 拖 动 。 一 个 
UI 元 素 可 以 是 <img>， 也 可 以 是 <div>， 在 代码 10.8 中 ， 一 个 可 以 被 拖 动 的 UI 元 素 是 id 值 为 
“draggable” 的 <div> 元 素 。 在 页 面 的 初始 化 过 程 中 (有 关 页 面 初始 化 ， 可 参考 本 书 第 11 章 )， 这 
个 <div> 元 素 被 draggable0 方 法 定义 为 一 个 可 以 被 拖 动 的 UI 元素。 以 上 用 法 与 jQuery UI 中 的 
标准 编程 方法 相同 (可 参考 jQuery UI 网 站 http://jqueryui.com 与 用 户 交 互 方式 相关 的 编程 方法 )， 
从 网 页 代码 来 看 , 它 在 网 页 文档 的 <head> 部 分 引用 了 jQuery UI 的 JavaScript 文件 , 这 在 常规 的 
jQuery Mobile 网 页 中 并 不 需要 , 同时 , 这 个 网 页 又 比 jQuery UI 或 者 jQuery Mobile 网 页 额外 引 
用 了 Touch Punch 的 JavaScript 文件 ， 使 jQuery UI 的 拖 动 功能 能 够 在 移动 设备 上 同样 有 效 。 


代码 10.8 网 页 UI 元 素 的 拖 动 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile -UI 组 件 扩 展 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link href="custom-icon-l/custom-icon-01.css" rel="stylesheet" /> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/ 
1.10.3/jquery-ui.min.js"></script> 
<script src="js/TouchPunch/jquery .ui.touch-punch.min.js"></script> 
<meta content="width=device-width, initial-scale=1.0" name="viewport"> 


<style> 
.drag container { 
width: 100%; 
height: 450px; 


} 
#draggable { 


width: 100px; 
height: 30px; 
text-align: center; 


@ jQuery UI Touch Punch 项 目 网 站 : http://touchpunch furf.com。 
@ GPL version 2 许可 证 : http://www.gnu.org/licenses/gpl-2.0.html。 
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background-color: yellow; 
} 
</style> 
<script> 
$ (document) .on ("pageinit", "#pl1l", function(event) { 
$("#draggable") .draggable (); 
Ds; 
</script> 
</head> 


<body> 
<div data-role="page" id="pl" data-theme="a"> 
<div data-role="header"> 
<hl>Touch Punch</h1l> 
</div> 
<div class="ui-content" role="main"> 
<div class="drag container"> 
<div id="draggable"> 拖 动 测试 </div> 
</div> 
</div> 
</div> 
</body> 
</html> 


拖 动 效果 如 图 10.31 所 示 。 
[CCSPITZI [745023] 


jqm webhop me jam webhop me 


Touch Punch Touch Punch 


10.31 在 移动 设备 上 被 拖 动 的 UI 元 素 
在 jQuery UI 中 ,一 个 UI 元 素 的 拖 动 不 仅 限 于 最 普通 的 draggable0 方 法 ， 它 同样 适用 于 
过 拖 动 方式 对 列表 中 的 条 目 重 新 排序 的 sortable0 方 法 (sortable0 方 法 同样 来 源 于 jQuery UD。 
代码 10.9 中 包含 了 一 个 jQuery Mobile 的 列表 视图 (listview)， 它 的 本 质 是 <ul> 或 者 <ol> 列 


t 


通 
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使 用 sortable0 方 法 。 这 样 ， 我 们 就 得 到 了 一 个 可 以 被 手工 拖 动 重新 排序 的 列表 视图 。 
代码 10.9 与 代码 10.8 非常 相似 , 主要 差别 在 于 使 用 了 sortable0 方 法 代替 draggable() 方 法 。 


代码 10.9” 拖 动 排序 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - UI 组 件 扩展 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link href="custom-icon-1/custom-icon-01.css"” rel="stylesheet" /> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/ 
1.10.3/jquery-ui.min.js"></script> 
<script src="js/TouchPunch/jquery .ui.touch-punch.min.js"></script> 
<meta content="width=device-width, initial-scale=1.0" name="viewport"> 
<script> 
$ (document) .on ("pageinit", "#p1l", function(event) { 
$("#sortable") .sortable(); 
$("#sortable") .disableSelection(); 
DD); 
</script> 
</head> 


<body> 
<div data-role="page" id="pl" data-theme="a"> 
<div data-role="header"> 
<hl>Touch Punch</h1l> 
</div> 
<div class="ui-content" role="main"> 
<ul data-role="listview" id="sortable"> 


<1i> 香 菩 </1i> 
<1i> 苹 果 </1i> 
<1i> 西 瓜 </1i> 
<1i> 葡 萄 </1i> 
<1i> 柄 子 </1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


手工 拖 动 排序 的 显示 效果 如 图 10.32 所 示 。 
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图 10.32 ”列表 视图 的 初始 状态 ， 以 及 列表 条 目 正在 被 拖 动 中 ， 与 重新 排序 以 后 的 状态 


10.3.2 日 期 选择 器 


HTML 5 中 date 类 型 的 <input> 字 段 在 不 同 的 浏览 器 中 会 有 完全 不 同 的 用 户 输入 方式 。 一 些 
浏览 器 可 能 会 完全 忽略 输入 字段 的 日 期 属性 , 另 一 些 浏览 器 也 有 可 能 会 弹出 一 个 功能 完 日 
历 ， 便 于 用 户 输 入 。jQuery UI 中 的 Datepicker 很 好 地 解决 了 这 个 问题 ， 它 不 依赖 <input> 元 素 的 
date 类 型 ， 只 需要 一 个 普通 的 text 类 型 的 文本 输入 框 ， 就 能 产生 统一 的 日 历 界面 ， 使 不 同 的 浏览 
器 都 能 达到 高 度 一 致 的 用 户 体验 。 可 惜 的 是 ，jQuery Mobile 框 架 没 有 提供 这 样 的 UI 组 件 。 在 
jQuery Mobile 网 页 中 使 用 这 样 的 功能 需要 jQuery Mobile Datepicker Wrapper" 的 帮助 。 这 个 项 目 
采用 MIT 许 可 证 授权 方式 。 

与 jQuery UI Touch Punch 不 同 ，jQuery Mobile Datepicker Wrapper 从 jQuery UI 中 提取 了 
Datepicker 的 相关 代码 ， 因 此 ， 在 使 用 上 不 需要 引用 整个 jQuery UI 的 JavaScript 文件 ， 这 样 ， 
使 造成 JavaScript 冲突 的 机 会 大 大 减 小 。 

jQuery UI 以 英语 为 基础 ， 日 历 界面 上 的 文字 说 明 为 英语 。 为 了 使 Datepicker 支 持 多 国文 字 
(il8n), 我 们 还 需要 下 载 :jQuery UI 多 国语 言 支持 语言 附加 软件 包 ” 中 所 需要 的 语言 插件 。 简体 中 
文 的 语言 代码 是 zh-CN， 如 图 10.33 所 示 。 


国 datepickervijs 


国 datepickerzh-TWjs 


图 10.33 jQuery Ul 多 国语 言 支持 软件 包 中 对 简体 中 文 的 支持 


四 jQuery Mobile Datapicker Wrapper 项 目 网 站 : https://github.com/arschmitz/jquery-mobile-datepicker-wrapper。 
@) jQuery UIil8n 项 目 网 站 : https://github.com/jquery/jquery-ui/tree/master/ui/il8n。 
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代码 10.10 演示 了 Datepicker 在 jQuery Mobile 网 页 中 的 使 用 方法 。 
代码 10.10 ”Datepicker 在 jQuery Mobile 网 页 中 的 使 用 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - UI 组件 扩展 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link href="custom-icon-1/custom-icon-01.css"” rel="stylesheet" /> 
<link href="js/jquery-mobile-datepicker-wrapper-master/ 
jquery .mobile.datepicker.css" rel="stylesheet" /> 
<link href="js/jquery-mobile-datepicker-wrapper-master/ 
jquery .mobile.datepicker.theme.css" rel="stylesheet" /> 
<script src="js/jquery-mobile-datepicker-wrapper-master/ 
external/jquery-ui/datepicker.js"></script> 
<script src="js/jquery-mobile-datepicker-wrapper-master/ 
jquery .mobile.datepicker.js"></script> 
<script src="js/jquery-ui-il8n/datepicker-zh-CN.js"></script> 
<meta content="width=device-width, initial-scale=1.0" name="viewport"> 
</head> 


<body> 
<div data-role="page" id="pl" data-theme="a"> 
<div data-role="header"> 
<hl>Datepicker</h1l> 
</div> 
<div class="ui-content" role="main"> 
<input id="myDate" name="myDate" type="text" data-role="date"> 
</div> 
</div> 
</body> 
</html> 


从 代码 中 可 以 看 出 ,与 很 多 jQuery UI 中 的 组 件 一 样 , Datepicker 的 基本 使 用 方法 非常 简单 。 
在 加 载 了 jQuery Mobile Datepicker Wrapper 必需 的 JavaScript 和 CSS 以 后 ， 在 网 页 代码 中 只 需 
要 把 data-role=“date” 添 加 到 一 个 文本 字段 中 即 可 。 日 期 选择 器 默认 在 日 历 中 显示 “今天 ”, 通 
过 日 历 上 的 左 / 右 箭头 图 标 前 进 或 者 后 退 一 个 月 。 
图 10.34 是 一 个 用 户 还 没有 选择 日 期 的 日 历 ， 以 及 用 户 输 入 完成 以 后 的 文本 字段 。 
图 10.34 中 ， 日 期 在 文本 输入 框 中 按照 “年 -月 -日 ”显示 为 “2014-12-31”， 如 果 要 把 格式 
和 分 隔 符 一 起 改 为 “月 /日 /年 ”( 美 国 格式 ) 或 者 “日 /月 /年 ”( 加 拿 大 格式 )， 就 需要 设置 额外 的 
属性 。 这 些 额 外 的 属性 来 源 于 jQuery UI 中 Datepicker 组 件 的 初始 化 参数 。 
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jQuery Mobile Datepicker Wrapper 把 这 些 参 数 改 为 以 “data-” 为 前 级 的 HTML 5 扩展 属性 


的 形式 。 以 下 是 几 个 常用 属性 的 用 法 。 


jqam webhop me jam webhop me 


2014-12.31 
2014 年 十 二 月 


2 
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图 10.34 日 期 选择 器 以 及 被 日 期 填充 的 文本 输入 框 
读者 可 以 用 下 面 的 代码 替换 代码 10.10 中 的 相应 代码 ， 对 日 期 选择 器 做 出 不 同 的 设置 : 
<!-- 设置 日 期 格式 为 “月 /日 /年 ”( 见 图 10.35) --> 


<input id="myDate" name="myDate" type="text" data-role="date" 
data-date-format="mm/dd/yy"> 


<!-- 在 星期 之 前 显示 “ 周 ”( 见 图 10.36) --> 
<input id="myDate" name="myDate" type="text" data-role="date" 
data-show-week="true"> 


<!-- data-min-date: 有 效 日 期 的 起 始 值 --> 

<!-- data-max-date: 有 效 日 期 的 终止 值 --> 

<!-- 设 定 有 效 日 期 区 间 可 以 采用 以 今天 为 基准 的 “天 数 ” 偏 移 量 --> 

<input id="myDate" name="myDate" type="text" data-role="date" 
data-min-date="-7" data-max-date="30"> 


<!-- 设 定 有 效 日 期 区 间 可 以 采用 以 今天 为 基准 的 “w” (星期 ) 和 “ad” (天 ) 偏 移 量 --> 
<input id="myDate" name="myDate" type="text" data-role="date" 
data-min-date="-2d" data-max-date="+4w +3d"> 


<!-- 有 效 日 期 的 的 起 止 “ 年 ”( 日 历 仅 显 示 从 开始 年 的 1 月 到 终止 年 的 12 月 ) --> 
<input id="myDate" name="myDate" type="text" data-role="date™" 
data-year-range="2014:2016"> 


运行 结果 如 图 10.35 和 10.36 所 示 。 
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图 10.35 以 “月 /日 /年 ” 格式 输入 日 期 10.36 在 星期 之 前 显示 “ 周 ” 


10.4 本 章 习题 


1. 练习 题 


(1) 选择 任意 一 组 正方 形 SVG 和 PNG 图形， 按照 jQuery Mobile 的 标准 方式 创建 一 个 用 
于 自 定义 图 标的 CSS 文件 ， 并 在 测试 网 页 中 验证 图 标的 有 效 性 。 

(2) 通过 IcoMoon 下 载 一 个 图 标 集 。 要 求 图 标 集中 只 能 包含 与 下 列 付 费 方式 相关 的 图 标 : 
借 记 卡 (Debit Card)、 维 萨 卡 (Visa)、 万 事 达 卡 (MasterCard)、 运 通 卡 (American Express)、PayPal， 
以 及 比特 币 (BitCoin)。 


2. 编程 题 

(1) 设计 一 个 jQuery Mobile 网 页 。 网 页 包含 一 个 拥有 4 个 按钮 的 导航 栏 。 4 个 按钮 上 的 图 
标 分 别 是 飞机 、 轮 船 、 火 车 和 汽车 。 图 标 集 不 限 。 

(2) 设计 一 个 网 页 切换 动画 效果 。 在 正 向 过 渡 过 程 中 ， 原 来 的 页 面向 右 移出 浏览 器 ， 新 的 
页 面 从 屏幕 左 侧 进入 浏览 器 。 反 向 过 程 全 部 采用 淡 入 淡出 效果 。 
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本 章 导读 : 


jQuery Mobile 网 页 以 jQuery 为 基础 ， 运 行 在 移动 浏览 器 中 。 在 网 页 上 发 生 的 
与 浏览 器 或 者 表单 等 相关 的 事件 (event) 能 够 被 jQuery 处 理 ， 即 jQuery 的 常规 事件 
处 理 同样 适用 于 jQuery Mobile。 同 时 ， 由 于 工作 方式 的 特点 ，jQuery Mobile 还 在 
JavaScript 内 建 的 事件 类 型 之 上 设计 了 其 他 多 种 事件 类 型 ， 其 中 包括 与 网 页 初始 化 
或 者 与 触摸 屏 相关 的 事件 。 

本 章 中 ， 我 们 将 探讨 jQuery Mobile 网 页 中 具有 典型 意义 的 事件 处 理 方法 。 通 
过 这 一 章 的 学 习 ， 读 者 将 更 深入 地 了 解 jQuery Mobile 网 页 在 初始 化 过 程 中 的 时 序 
问题 ， 了 解 用 户 动 作对 于 移动 浏览 器 和 桌面 浏览 器 所 产生 的 不 同 影响 。 

如 果 读 者 需要 了 和解 jQuery 中 的 常规 事件 处 理 方法 ， 或 者 需要 了 解 更 多 的 有 关 
jQuery 对 网 页 的 动态 处 理 方法 ， 可 参考 本 书 的 第 4 章 。 
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11.1 网 页 与 初始 化 事件 


11.1.1 网 页 的 初始 化 事件 


本 书 的 第 4 章 介绍 了 网 页 加 载 过 程 中 的 时 序 问 题 ， 以 及 通过 jQuery 的 ready0 方 法 对 加 载 
时 序 问题 的 解决 方案 。 

然而 ，jQuery Mobile 的 页 面 载 入 过 程 与 普通 网 页 不 同 。 在 jQuery Mobile 的 多 页 结构 中 ， 

-次 只 加 载 HTML 文档 中 的 一 个 页 面 , 而 不 是 把 整个 HTML 文档 一 起 载 入 到 浏览 器 中 , 因此 ， 

jQuery Mobile 网 页 初始 化 是 以 “页 面 ”为 单位 。 同 时 ， 这 也 表明 ， 除 非 是 一 个 jQuery Mobile 
网 页 文档 只 含有 一 个 页 面 ， 否 则 jQuery 的 ready0 方 法 并 不 适用 于 jQuery Mobile 网 页 。 

jQuery Mobile 页 面 初始 化 分 为 两 个 主要 步骤 ,一 个 页 面 首 先 需要 被 加 载 , 产生 或 者 加 入 到 
DOM 结构 中 ， 然 后 jQuery Mobile 框架 对 页 面 的 表现 进行 样式 增强 (enhancement)( 可 参考 本 书 
第 1 章 中 有 关 Web 设计 策略 和 对 “渐进 增强 ”的 描述 )。jQuery Mobile 的 pagecreate 事件 对 应 
于 当 一 个 页 面 在 DOM 中 创建 完成 ， 页 面 上 的 UI 组件 的 “样式 增强 ”还 没有 完成 时 。 

下 面 的 代码 11.1 通过 一 个 简单 的 实验 来 说 明 页 面 初始 化 的 过 程 。 

代码 11.1 一 个 HTML 文 档 中 的 页 面 被 分 别 初始 化 的 实验 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - Events</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<style> 
.myContent { 
font-style: normal; 
} 
</style> 
<script> 
$ (document) .on ("pagecreate", "#page2", function(event) { 
$(".myContent") .css ("font-style", "italic"); 
DD); 
$ (document) .on ("pagecreate", "#page3", function(event) { 
$(".myContent") .css ("font-size", "300%"); 
DD); 
/Beript> 
</head> 
<body> 
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<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 主 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="#page2" data-role="button" data-mini="true" 
data-inline="true"> 按 钮 :第 二 页 </a> 
<a href="#page3" data-role="button" data-mini="true" 
data-inline="true"> 按 钮 : 第 三 页 </a> 
</div> 
</div> 
<div id="page2" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<hl1> 第 二 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div class="myContent"> 第 二 页 内 容 </div> 
</div> 
</div> 
<div id="page3" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 第 三 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div class="myContent"> 第 三 页 内 容 </div> 
</div> 
</div> 
</body> 
</html> 


代码 11.1 是 一 个 包含 3 个 页 面 的 HTML 文档 。 其 中 第 一 页 包括 了 分 别 前 往 第 二 页 和 第 三 
页 的 按钮 。 第 二 页 和 第 三 页 上 的 内 容 都 是 通过 CSS 类 myContent 作为 修饰 。 这 个 CSS 类 在 默 
认 情 况 下 没有 做 任何 特别 设置 。 当 第 一 次 点 击 “ 按 钮 : 第 二 页 ”以 后 ， 第 二 页 被 加 载 并 加 入 到 
DOM 中 。 这 时 ， 第 二 页 上 的 pagecreate 事件 被 触发 ， 相 应 的 处 理 程序 把 CSS 类 myContent 中 
的 font-style 属性 设置 为 斜体 。 因 此 ， 当 第 二 页 显示 到 屏幕 上 时 ， 我 们 看 到 了 文字 内 容 为 斜体 。 
当 第 一 次 点 击 “ 按 钮 : 第 三 页 ”以 后 ， 第 三 页 在 DOM 中 创建 ， 随 即 触发 第 三 页 上 的 pagecreate 
事件 。 这 个 事件 对 应 的 处 理 程 序 把 CSS 类 myContent 中 的 font-size 属性 设置 为 900。 

由 于 myContent 类 中 的 font-style 已 经 被 设置 为 斜体 ， 当 修改 font-size 属性 时 ，font-style 
没有 被 改动 ， 仍 然 保留 了 斜体 样式 ， 这 样 ， 当 第 三 页 显示 在 屏幕 上 时 ， 文 字 内 容 的 样式 风格 既 
是 和 斜体， 又 是 900( 特 大 )。 当 第 二 页 和 第 三 页 都 访问 过 以 后 ， 两 个 页 面 上 的 pagecreate 事件 被 分 
别 触 发 ， 并 且 修改 了 myContent 类 中 的 两 个 属性 ， 当 再 次 回 到 第 二 页 时 ， 第 二 页 上 的 文字 样式 
也 是 既是 斜体 ， 又 是 特大 。 以 上 过 程 可 以 通过 图 11.1 中 的 4 个 画面 来 更 直观 地 体现 。 
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图 11.1 每 一 个 页 面 分 别 初始 化 对 页 面 显示 的 影响 
-个 pagecreate 事件 处 理 程序 的 基本 用 法 是 : 
$ ("< 选择 器 >") .on ("pagecreate"，"#< 页 面 id>"， function (event) { 
// 处 理 程序 

Ds; 

上 述 方法 中 的 页 面 id 部 分 可 以 省 略 。 如 果 省 略 页 面 ia， 那么 事件 处 理 程序 将 对 所 有 的 页 
面 有 效 ， 而 不 是 只 针对 个 别 页 面 。 同 时 需要 注意 ， 一 个 页 面具 需要 初始 化 一 次 ， 当 一 个 页 面 从 
隐藏 状态 切换 回 到 显示 状态 时 ， 不 需要 重新 初始 化 。 

以 上 介绍 的 是 jQuery Mobile 中 页 面 的 初始 化 过 程 。 实 际 上 ，jQuery Mobile 中 的 初始 化 是 
从 mobileinit 事件 开始 的 。mobileinit 可 以 用 于 对 jQuery Mobile 做 全 局 性 的 配置 。 这 个 事件 在 
jQuery 框架 加 载 以 后 就 会 被 触发 ， 甚 至 早 于 jQuery Mobile 框架 的 加 载 。 

代码 11.2 是 一 个 通过 mobileinit 事件 处 理 程序 简化 默认 的 返回 按钮 的 创建 过 程 。 

通常 ， 一 个 页 面 的 页 头 需要 声明 data-add-back-btn=“true” 和 data-back-btn-text=“ 返 回 ” 这 样 
的 属性 ， 才 能 使 这 个 页 面 在 页 头 部 分 拥有 由 系统 产生 的 返回 按钮 ， 并 且 返 回 按钮 上 面 的 文字 由 
默认 的 英文 单词 Back 替换 为 我 们 需要 的 文字 。 在 每 一 个 页 面 中 做 相同 的 设置 并 不 是 一 个 好 办 
法 。 而 在 代码 11.2 中 ， 通 过 响应 mobileinit 系统 初始 化 事件 ， 对 jQuery Mobile 重新 设置 以 后 ， 
网 页 代码 就 有 了 很 大 的 简化 。 


代码 11.2 ”通过 mobileinit 配 置 jQuery Mobile 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - Events</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script> 
$ (document) .on ("mobileinit", function() { 
$.mobile.toolbar.prototype.options.addBackBtn = true; 
$.mobile.toolbar.prototype.options.backBtnText = "返回 "; 
Ds; 
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</script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header"> 
<h1> 主 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="#page2" data-role="button" data-mini="true" 
data-inline="true"> 按 钮 第 二 页 </a> 
<a href="#page3" data-role="button" data-mini="true" 
data-inline="true"> 按 钮 : 第 三 页 </a> 
</div> 
</div> 
<div id="page2" data-role="page"> 
<div data-role="header"> 
<h1> 第 二 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div> 第 二 页 内 容 </div> 
</div> 
</div> 
<div id="page3" data-role="page"> 
<div data-role="header"> 
<h1> 第 三 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div> 第 三 页 内 容 </div> 
</div> 
</div> 
</body> 
</html> 


11.1.2 ”外 部 网 页 加 载 事件 


当 jQuery Mobile 尝试 一 个 外 部 网 页 时 ，pagecontainerbeforeload 事件 先 被 触发 ， 然 后 判断 
网 络 访问 的 返回 状态 ， 如 果 访 问 成 功 ， 则 pagecontainerload 事件 被 触发 ， 如 果 访 问 失败 ， 则 
pagecontainerloadfailed 事件 被 触发 。 

代码 11.3 是 一 个 包含 两 个 页 面 的 HTML 文档 ， 其 中 一 个 页 面 带 有 两 个 导航 按钮 ， 另 外 一 
个 页 面 用 于 显示 错误 信息 。 第 一 个 页 面 上 的 两 个 导航 按钮 ， 分 别 指向 两 个 不 同 的 外 部 页 面 。 

正如 按钮 上 的 文字 描述 的 那样 ， 其 中 一 个 按钮 能 够 成 功 加 载 外 部 页 面 ， 另 外 一 个 按钮 所 指 
向 的 外 部 页 面 不 存在 。 当 按 下 第 一 个 按钮 时 ， 由 于 能 够 成 功 加 载 外 部 网 页 ，pagecontainerload 
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事件 被 触发 , 事件 处 理 程序 中 的 alert0 在 浏览 器 中 显示 一 条 警告 信息 (图 11.2 中 的 第 一 幅 画 面 )。 
当 按 下 另 一 个 按钮 时 , 由 于 导航 按钮 指向 的 页 面 不 存在 , 网 页 加 载 失 败 , pagecontainerloadfailed 
事件 被 触发 ， 相 应 的 事件 处 理 程序 在 浏览 器 中 载 入 错误 信息 页 面 (图 11.2 中 的 第 二 幅 画面 )。 


jamwebhop.me/CH11/ 冤 半 scose ]】 jamwebhopme/CH11, 安 着 6oo9e 】 
主页 Qs 错误 


网 页 访问 失败 ! 


功 同 一 个 外 部 网页 
切 问 一 个 不 存在 的 网 页 


jqm.webhop.me 
网 页 访问 成 功 


功 


ER 区 ER 


图 11.2 外 部 网 页 能 够 访问 和 不 能 够 成 功 访问 时 ， 不 同 的 事件 被 触发 


代码 11.3 ”外 部 网 页 加 载 成 功 与 失败 的 测试 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - Events</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<script> 
$ (document) .on ("pagecreate", "#home", function() { 
$("#errorPageLink") .hide(); 
Ds; 
$ (document) .on ("pagecontainerload",function(event, data) { 
alert ("网 页 访问 成 功 "); 
DD); 
$ (document) .on ("pagecontainerloadfailed", function(event, data) { 
$ ("#errorPageLink") .trigger ("click"); 
1D; 
</script> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true™ 
data-back-btn-text=" 返 回 "> 
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<h1> 主 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="external.html™" data-role="button" data-mini="true" 
data-inline="true"> 访 问 一 个 外 部 网 页 </a> 
<a href="nothing.html" data-role="button" data-mini="true" 
data-inline="true"> 访 问 一 个 不 存在 的 网 页 </a> 
<a href="#errorPage" id="errorPageLink">Error Page</a> 
</div> 
</div> 
<div id="errorPage" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 错 误 </h1> 
</div> 
<div class="ui-content" role="main"> 
<qdiv> 网 页 访问 失败 ! </div> 
</div> 
</div> 
</body> 
</html> 
代码 11.3 中 的 错误 信息 页 面 是 由 trigger0 方 法 在 指向 错误 信息 页 面 的 链接 上 模拟 了 一 次 点 
击 (click) 操 作 。 这 个 链接 在 页 面 初始 化 过 程 中 被 设置 为 隐藏 状态 。 程 序 中 的 trigger0 和 hide() 方 
法 都 是 来 源 于 jQuery 的 方法 。 


11.1.3 ”网 页 切换 过 程 事 件 


网 页 切换 是 在 一 个 浏览 器 中 ， 当 前 的 页 面 被 一 个 新 的 页 面 替 换 的 过 程 。 这 个 过 程 涉及 了 两 
个 页 面 ， 每 一 个 页 面 在 这 个 过 程 中 都 发 生 了 状态 改变 。 当 前 页 面 从 “即将 隐藏 ”状态 变 为 “ 隐 
藏 ”状态 ， 新 的 页 面 从 “即将 显示 ”状态 变 为 “显示 ”状态 。 

当 一 个 页 面 进 入 其 中 某 一 种 状态 时 ， 就 会 触发 与 相应 状态 相关 的 事件 ， 例 如 ， 
pagecontainerbeforehide( 网 页 即将 隐藏 )、pagecontainerhide( 网 页 隐藏 之 前 的 动画 已 经 完成 )、 
pagecontainerbeforeshow( 网 页 即将 显示 )， 以 及 pagecontainershow( 网 页 显示 之 前 的 动画 已 经 完 
成 )。 以 上 4 个 事件 分 别 发 生 在 新 旧 不 同 的 页 面 中 ， 而 不 会 在 两 个 页 面 都 被 触发 。 

下 面 的 代码 11.4 通过 事件 处 理 程序 中 的 alert0, 演示 了 页 面 即将 隐藏 和 页 面 即 将 显示 之 时 
的 事件 。 通 常情 况 下 ， 页 面 隐藏 之 前 可 以 完成 一 些 必要 的 数据 清理 工作 ， 而 在 一 个 页 面 即 将 显 
示 前 ， 如 果 需 要 临时 改变 页 面 局 部 的 样式 ， 这 是 页 面 在 浏览 器 中 显示 前 修改 样式 的 最 后 机 会 。 

代码 11.4 网 页 切换 过 程 中 的 事件 响应 


<!DOCTYPE html> 

<html> 

<head> 
<title>jQuery Mobile - Events</title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
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<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<style> 
.myImage { 
width: 100%; 
height: auto; 
} 
</style> 
<script> 
$ (document) .on ("pagecontainerbeforehide", functionl(event, data) { 
alert ("正在 进入 : " + data.nextPage.attr('id')); 
]}) 7 
$ (document) .on ("pagecontainerbeforeshow", function(event, data) { 
alert ("正在 离开 : " + data.prevPage.attr('id')); 
DD); 
</script> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 主 页 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="#shenyang" data-role="button" data-mini="true" 
data-inline="true" data-transition="slidedown"> 
沈阳 - 清 昭 陵 </a> 
</div> 
</div> 
<div id="shenyang" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 沈 阳 - 清 昭 陵 </h1> 
</div> 
<div class="ui-content" role="main"> 
<img src="images/shenyang 01.jpg" class="myImage" 
alt=" 清 昭 陵 " id="img_shenyang"> 
</div> 
</div> 
</body> 
</html> 


与 页 面 的 创建 和 初始 化 不 同一 个 页 面 的 每 一 次 隐藏 和 显示 都 会 触发 相关 事件 。 需要 注意 
的 是 ， 程 序 中 ， 事 件 处 理 程序 所 使 用 的 第 二 个 参数 包含 了 许多 状态 数据 。data.prevPage 和 
data.nextPage 分 别 代 表 了 一 个 页 面 的 对 象 ， 通 过 jQuery 的 atur(“id”) 就 能 够 获得 正在 离开 或 者 正 
在 进入 的 页 面 的 id 值 。 
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11.2 用户 操作 事件 


11.2.1 方向 位 置 事件 


-个 移动 设备 在 使 用 的 过 程 中 ， 可 能 会 处 于 生 直 或 者 水 平 放置 的 位 置 。 当 用 户 改 变 设备 的 
放置 位 置 时 ， 浏 览 器 中 的 网 页 (或 其 他 应 用 程序 ) 就 会 响应 位 置 的 改变 ， 而 对 用 户 界面 做 出 相应 
的 调整 。 位 置 的 改变 对 应 于 JavaScript 的 window 对 象 。 当 设备 的 放置 位 置 发 生变 化 时 , window 
对 象 的 orientationchange 事件 被 触发 。 通 过 事件 处 理 程序 获得 的 event 对 象 ， 我 们 在 程序 中 就 
可 以 知道 设备 当前 所 处 的 位 置 。 

代码 11.5 演示 了 当 设 备 位 置 改变 后 ，orientationchange 事件 处 理 程序 的 简单 使 用 方法 。 


代码 11.5 ”orientationchange 事 件 处 理 程序 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - Events</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<style> 
#info { 
font-size: 3em; 
} 
</style> 
<script> 
$ (window) .on ("orientationchange", function(event) { 
var orientationMode = event .orientation; 
$("#info") .text (orientationMode); 
DD); 
</script> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 方 向 改变 事件 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div id="info"> 开 始 测试 设备 放置 位 置 。</div> 


</div> 
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</div> 
</body> 
</html> 
代码 11.5 首先 说 明了 orientationchange 事件 与 JavaScript 的 window 对 象 相关 。 当 位 置 改 
变 时 , 被 触发 的 事件 对 象 中 带 有 orientation 属性 , 这 个 属性 代表 了 设备 当前 的 状态 是 portrait( 垂 
直 放 置 ) 或 者 是 landscape( 水 平 放置 )。 运 行 结果 如 图 11.3 所 示 。 
EFEEEESEEEEEEEEEEEEPEEE 


Jam.webhop. me 


方向 改变 事件 


portrait 
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方向 改变 事件 


landscape 


11.3 ” 当 移 动 设备 处 于 不 同 的 位 置 时 ，orientationchange 事 件 处 理 程序 的 参数 带 有 当前 位 置信 息 
状态 参数 值 portrait 或 者 landscape 在 绝 大 多 数 情况 下 不 需要 向 用 户 显示 ， 因 此 ， 这 两 个 值 
即使 是 英语 ， 也 不 会 影响 程序 的 使 用 。 这 两 个 值 实际 上 来 源 于 window 对 象 的 orientation 参数 。 
window 对 象 的 orientation 参数 能 够 用 于 判断 设备 的 当前 位 置 是 0( 初 始 或 者 默认 位 置 )，-90( 顺 
时 针 转 动 90 度 ), 或 者 是 90( 逆 时 针 转 动 90)。 我 们 也 可 以 把 代码 11.5 稍 做 改动 , 直接 利用 window 
对 象 的 orientation 参数 判断 设备 的 放置 位 置 。 
下 面 的 代码 片段 就 是 直接 利用 window 对 象 的 orientation 参数 的 例子 : 


$ (window) .on ("orientationchange", function(event) { 


if (window.orientation == 0) { 
$("#info") .text ("垂直 "); 

} else { 
$ ("#info") .text ("水 平 "); 

} 


]) 7 


11.2.2 ”滚屏 事件 

滚屏 事件 的 触发 条 件 包 括 了 整个 浏览 器 窗口 的 滚动 或 者 浏览 器 中 局 部 区 域 的 滚动 。 滚 屏 动 
作 包 括 滚屏 开始 (scrollstarDb 和 滚屏 结束 (scrollstop)。 

代码 11.6 演示 了 当 内 容 超出 了 一 个 <div> 容 器 的 高 度 以 后 ， 用 户 在 触摸 屏 上 使 网 页 内 容 在 
限定 的 容器 范围 内 滚动 产生 的 事件 以 及 事件 处 理 程序 .这 段 程序 包括 了 对 scrollstart 和 scrollstop 
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hl 


事件 的 响应 。 在 浏览 器 中 ， 当 滚动 网 页 内 容 时 ， 我 们 能 够 看 到 scrollstart 和 scrollstop 事件 交替 
出 现 。 每 次 滚屏 事件 发 生 时 ， 滚 屏 发 生 区 域 的 背景 颜色 就 会 发 生变 化 ， 而 当 滚 屏 事 件 结束 时 ， 
该 区 域 背 景 颜色 恢复 成 白色 。 


代码 11.6 ”使 用 滚屏 事件 


<!DOCTYPE html> 

<html> 

<head> 
<title>jQuery Mobile - Events</title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 

<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 

<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<style> 
#contentl { 
width: 99.9%; 
height: 300px; 


border-style: solid; 
border-width: lpx; 
overflow-y: auto; 
} 
</style> 
<script> 
$ (document) .on("scrollstart", function() { 
$("#content1") .css ("background-color", "yellow"); 
DD); 
$ (document) .on("scrollstop", function() { 
$("#content1") .css ("background-color", "white"); 
DD); 
</script> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 滚 屏 事件 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div id="content1"> 
1 <br> 2 <br> 3 <br> 4 <br> 5 <br> 
6 <br> 7 <br> 8 <br> 9 <br> 10<br> 
ll<br> 12<br> 13<br> 14<br> 15<br> 
16<br> 17<br> 18<br> 19<br> 20<br> 
21<br> 22<br> 23<br> 24<br> 25<br> 
</div> 
</div> 
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</div> 
</body> 
</html> 


11.2.3 ”触摸 事件 


在 jQuery Mobile 网 页 中 的 触摸 (touch) 事 件 包括 敲 击 (tap)、 滑动 (swipe) 及 其 相关 的 事件 。 这 
些 事件 来 源 于 JavaScript 底层 的 触摸 事件 touchstart、touchend、touchmove、touchcancel 等 。 触 
摸 屏 上 触摸 事件 的 触发 条 件 与 桌面 系统 中 由 鼠标 动作 产生 的 事件 的 触发 条 件 不 同 。 

1. tap 和 taphold 事 件 


敲 击 (tap) 事 件 不 同 于 点 击 (click) 事 件 ， 前 者 属于 用 户 在 触摸 屏 上 的 触摸 动作 ， 而 后 者 通常 
是 指 鼠 标 操作 。 这 两 类 事件 目前 在 移动 浏览 器 和 桌面 浏览 器 中 同样 有 效 。 但 是 ， 在 早期 的 浏览 
器 中 ,这 两 类 事件 曾经 被 明确 区 分 ， 由 此 带 来 了 同一 个 网 页 在 桌面 浏览 器 和 移动 浏览 器 中 分 别 
响应 不 同 的 事件 而 引起 的 用 户 体验 不 一 致 的 问题 。 

为 了 解决 这 一 个 问题 jQuery Mobile 引入 了 vclick 事件 , 用 以 在 移动 设备 上 响应 类 似 于 桌 
面 浏览 器 中 的 鼠标 事件 。 类 似 的 还 有 vmousecancel、vmousedown、vmousemove、vmouseout、 
vmouseover、vmouseup 等 事件 类 型 。 这 些 事件 名 称 中 的 v 代表 了 “虚拟 (virtual)”。 

tap 事件 和 taphold 事件 的 区 别 在 于 触发 发 生 的 时 间 长 度 。taphold 事件 的 默认 触发 条 件 是 接 
触 时 间 达 到 750 毫秒 。 而 tap 事件 则 用 于 一 个 瞬间 动作 。 

代码 11.7 在 一 个 网 页 上 显示 一 个 灰色 的 “测试 区 域 ”， 当 触摸 达到 750 毫秒 后 ，taphold 
被 触发 。tap 事件 触发 在 触摸 事件 结束 的 时 候 ， 因 此 ， 当 触摸 事件 瞬间 发 生 时 ，tap 事件 被 触发 ， 
而 taphold 发 生 以 后 ， 并 且 触 摸 事 件 结束 时 ，tap 事件 同样 会 被 触发 。 在 编写 事件 处 理 程序 时 ， 
应 该 注意 到 事件 触发 的 时 间 点 问题 。 


代码 11.7 ”使 用 敲 击 事件 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - Events</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<style> 
.testArea { 
width: 99.9%; 
height: 200px; 
border-style: solid; 
border-width: 1px; 


background-color: #EEEEEE; 
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#infoArea { 
font-size; 24px; 
} 
</style> 
<script> 
$ (document) .on ("pagecreate", function() { 
$("#testArea") .on("tap", function() { 
$("#infoArea") .text ("tap") .show() .hide (600); 
]}) 7 
$("#testArea") .on ("taphold"，function() { 
$("#infoArea") .text("taphold") .show() .hide (600); 
时 
]}) 7 
</script> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 敲 击 事件 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div id="testArea"” class="testArea"> 测 试 区 域 </div> 
<div id="infoArea"></div> 
</div> 
</div> 
</body> 
</html> 


2. swipe、swipeleft 和 swiperight 事 件 


与 敲 击 事件 相 比 , 滑动 事件 在 程序 代码 上 没有 很 大 的 差别 , 代码 11.8 演示 了 一 个 滑动 事件 
的 例子 。 这 里 的 滑动 ， 都 是 指 水 平方 向 的 运动 ， 其 中 swipeleft 和 swiperight 分 别 在 向 左 或 者 向 
右 移动 30px 以 后 才 会 被 触发 ，swipe 不 区 分 左右 ， 只 要 水 平移 动 达到 30px 就 会 被 触发 。 


代码 11.8 ”使 用 滑动 事件 


<!DOCTYPE html> 


<html> 
<head> 
<title>jQuery Mobile - Events</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<style> 
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.testArea { 


width: 99.9%; 
height: 100px; 
border-style: solid; 
border-width: lpx; 


background-color: #EEEEEE; 
} 
#infoArea { 
font-size: 24px; 
} 
</style> 
<script> 
$ (document) .on ("pagecreate", function() { 
$("#testAreal") .on ("swipe", function() { 
$("#infoArea") .text ("swipe") .show() .hide (600); 
]) 7 
$("#testArea2") .on ("swipeleft"，function() { 
$("#infoArea") .text("swipeleft") .show() .hide(600); 
]) 7 
$("#testArea2") .on ("swiperight"，function() { 
$("#infoArea") .text ("swiperight") .show() .hide (600); 
1D); 
DD); 
</script> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 滑 动 事 件 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div id="testAreal"” class="testArea"> 水 平 测试 区 域 </div> 
<div id="testArea2"” class="testArea"> 左 右 滑动 测试 区 域 </div> 
<div id="infoArea"></div> 
</div> 
</div> 
</body> 
</html> 


3. vmousemove 事 件 


vmousemove 与 vmousecancel、vmousedown、vmouseout、vmouseover、vmouseup 等 都 是 
在 移动 设备 的 触摸 屏 上 为 了 实现 像 响应 鼠标 事件 那样 响应 触摸 事件 而 设计 的 虚拟 事件 类 型 。 

以 vmousemove 为 例 ， 它 能 够 跟踪 “鼠标 ”的 实时 运行 轨迹 ， 反 馈 实时 的 “鼠标 ”坐标 。 

代码 11.9 演示 了 在 一 个 限定 的 <div> 范 围 内 ， 手 指 的 滑动 随时 通过 vmousemove 事件 把 坐 
标 动态 地 显示 在 屏幕 上 。 
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代码 11.9 使 用 虚拟 鼠标 事件 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - Events</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<style> 
#contentl1 { 
width: 99.9%; 
height: 300px; 


border-style: solid; 
border-width: lpx; 
} 
</style> 
<script> 
$ (document) .on ("vmousemove", "#contentl1", function(event) { 
$("#content1") .text (event.pageX + ", " + event.pageY); 
DD); 
</script> 
</head> 
<body> 
<div id="home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 虚 拟 鼠 标 事件 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div id="content1"> 
</div> 
</div> 
</div> 
</body> 
</html> 


11.3 本 章 习 题 


编程 题 
(1) 编写 一 个 含有 两 个 页 面 的 jQuery Mobile 网 页 ， 如 图 11.4 中 的 几 幅 画面 所 示 ， 第 一 个 
页 面 中 有 一 组 用 于 设置 字体 大 小 的 单 选 按钮 , 通过 这 组 单 选 按钮 设置 第 二 个 页 面 中 正文 内 容 的 
> 403 


jQuery Mobile 移 动 网 站 开发 


404 


字体 大 小 。( 提 示 : 使 用 与 页 面 切换 相关 的 事件 处 理 方法 ) 
[| 


am webhop me wabhapms jam webhopme 
字体 设置 3 休 a 字体 
测 试 
2em 
Pr 
设置 


图 11.4 字体 设置 页 面 和 字体 被 动态 改变 以 后 的 页 面 


(2) 编写 一 个 jQuery Mobile 网 页 。 在 这 个 网 页 中 ， 能 够 根据 在 触摸 屏 上 的 滑动 轨迹 ， 判 
断 运 行 方向 是 向 上 还 是 向 下 。( 提 示 : jQuery Mobile 的 swipe 事件 不 支持 重 直 方向 的 滑动 判断 ; 
利用 与 虚拟 所 标 事件 相关 的 处 理 方法 ) 


生生 上 -= 
宙 12 章 
jQuery 和 jQuery Mobile 的 插件 


本 章 导读 : 


如 果 jQuery Mobile 框 架 本 身 的 功能 以 及 各 种 对 框架 的 扩展 仍然 不 能 满足 要 求 ， 
就 需要 寻求 第 三 方 插件 的 帮助 。 由 于 jQuery Mobile 是 建立 在 jQuery 之 上 的 框架 ， 
因此 ， 一些 用 于 jQuery 的 插件 也 能 够 适用 于 jQuery Mobile。 

选用 第 三 方 插件 需要 注意 两 个 基本 原则 : @jQuery 插件 的 设计 必须 考虑 到 移动 
设备 的 特性 , 比如 对 页 面 布局 的 影响 , 或 对 触摸 事件 的 响应 能 力 等 ; @jQuery Mobile 
插件 必须 与 相应 的 jQuery Mobile 版 本 兼容 。 

本 章 将 介绍 一 些 相 互 独立 的 第 三 方 jQuery 或 者 jQuery Mobile 插件 的 基本 用 
法 。 这 些 插 件 都 符合 以 上 选用 标准 。 但 是 ， 随 着 jQuery 和 jQuery Mobile 的 版 本 变 
化 ， 插 件 的 兼容 性 和 适用 性 需要 重新 测试 和 评估 ， 因 此 ， 本 章 的 内 容 仅 供 参 考 。 通 
过 学 习 一 些 常 用 的 插件 ， 相 信 会 对 读者 将 来 的 插件 选择 工作 有 所 帮助 。 
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12.1 日 期 选择 器 插件 - DateBox 


在 本 书 第 10 章 中 ， 我 们 已 经 介绍 了 通过 借用 jQuery UI 的 日 期 选择 器 Datapicker 来 弥补 
jQuery Mobile 功能 不 足 的 方法 。Datepicker 组 件 在 屏幕 上 显示 为 了 一 个 月 历 。 这 个 组 件 能 够 满 
足 对 日 期 设置 的 功能 需求 。 

但 是 , 从 用 户 界 面 的 角度 来 看 , 许多 移动 设备 上 系统 自 带 的 日 期 选择 程序 不 但 有 月 历 样式 ， 
还 有 滚轮 等 样式 。DateBox 插 件 " 能 够 实现 许多 不 同样 式 的 日 期 选择 器 。 

DateBox 是 一 个 开源 软件 ， 使 用 自 定 义 的 软件 许可 证 授权 ， 免 费 使 用 ， 并 且 对 修改 、 合 并 、 
分 发 、 销 售 等 商业 行为 不 做 限制 。 它 是 一 个 真正 的 jQuery Mobile 插件 , 为 了 适应 jQuery Mobile 
系统 软件 的 变化 而 按照 jQuery Mobile 的 不 同 版 本 分 别 发 布 了 不 同 的 产品 软件 包 。 

DateBox 项 目 网 站 上 的 默认 下 载 版 本 为 最 新 版 。 这 个 软件 项 目 另 外 提供 了 一 个 下 载 工 具 
(Download Builder)， 使 用 户 能 够 按照 正在 使 用 的 jQuery Mobile 版 本 ， 以 及 从 该 项 目 所 支持 的 
各 种 日 期 选择 器 中 选择 需要 的 类 型 ， 创 建 一 个 定制 下 载 。 读 者 在 自行 下 载 以 后 ， 应 检查 软件 包 
中 的 文件 是 否 与 软件 文档 中 所 描述 的 一 致 。 本 书 作 者 在 写作 过 程 中 , 发现 了 该 项 目的 几 种 下 载 
方法 与 软件 描述 有 若干 不 相符 , 因此 本 书 光盘 中 第 12 章 实例 使 用 的 DateBox 插件 不 是 DateBox 
的 发 布 软件 包 ， 而 是 从 该 项 目的 JQM 1.4.2 分 支 中 单独 下 载 的 ， 并 且 按 照 该 项 目的 版 权 要 求 附 

上 软件 许可 证 原文 。DateBox 插件 软件 包含 有 下 列 关键 文件 : 

@ 一 个 CSS 文件 ， 例 如 jqm-datebox-1.4.2.css。 

@ -个 核心 JavaScript 文件 ， 例 如 jqm-datebox-1.4.2.core.js。 

e@ ”一 组 文件 名 中 带 有 “mode” 字 样 的 日 期 选择 器 JavaScript 文件 ， 每 一 个 文件 对 应 一 种 

日 期 选择 器 ， 一 组 国际 化 语言 文件 ， 这 些 文件 的 文件 名 中 带 有 ISO 标准 语言 /国家 代 
人 码 ， 比 如 jquery.mobile.datebox.i18n.zh-CN.utf8.js 是 简体 中 文 的 语言 包 。 如 果 读 者 通过 
DateBox 网 站 下 载 的 软件 中 不 带 有 语言 包 , 可 到 http://cdn.jtsage.com/datebox/il8n 中 找 
到 需要 的 语言 包 另 行 下 载 。 

DateBox 的 基本 使 用 方法 非常 简单 。 在 HTML 文档 中 ， 除 了 jQuery 和 jQuery Mobile 程序 
库 以 外 , 还 需要 加 载 DateBox 的 CSS 文件 , 核心 JavaScript 文件 根据 需要 添加 日 期 选择 器 文件 ， 
以 及 语言 包 。 语 言 包 不 是 必需 的 ， 如 果 语 言 包 缺 省 ， 日 期 选择 器 上 的 默认 语言 为 英语 。 不 是 每 

-个 日 期 选择 器 文件 都 需要 加 载 ， 只 需要 添加 与 网 页 中 用 到 的 日 期 选择 器 相对 应 的 JavaScript 
文件 即 可 。 添 加 所 有 的 日 期 选择 器 文件 并 不 会 造成 网 页 功能 上 的 影响 ， 但 是 ， 这 些 JavaScript 
文件 平均 每 一 个 9KB 容量 ， 添 加 过 多 的 文件 会 造成 网 页 运行 性 能 下 降 ， 并 且 增加 了 许多 不 必 
要 的 数据 流量 。 

代码 12.1 演示 了 基本 的 5 种 日 期 选择 器 样式 。 


代码 12.1 DateBox 的 基本 用 法 


<!DOCTYPE html> 
<html> 


O@ jQuery Mobile DateBox 项 目 网 站 : https://github.com /jtsage/jquery-mobile-datebox。 
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<head> 
<title>jQuery Mobile 插件 </title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 


<script sr js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 

<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 

<!-— DateBox 文件 一 -> 

<link href="plugins/datebox/css/jqm-datebox-1.4.2.css" rel="stylesheet"/> 

<script src="plugins/datebox/js/jqm-datebox-1.4.2.core.js"></script> 

<script src="plugins/datebox/js/jqm-datebox-1.4.2.mode.calbox.js"></script> 


<script 
src="plugins/datebox/js/jqm-datebox-1.4.2.mode.datebox.js"></script> 
<script 
src="plugins/datebox/js/jqm-datebox-1.4.2.mode.slidebox.js"></script> 
<script 


src="plugins/datebox/js/jqm-datebox-1.4.2.mode.flipbox.js"></script> 
<script src="plugins/datebox/js/jqm-datebox-1.4.2.mode.durationbox.js"> 
</script> 
<script 
src="plugins/datebox/il8n/jquery .mobile.datebox.il8n.zh-CN.utf8.js"> 
</script> 
</head> 


<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1>DateBox</h1> 
</div> 
<div class="ui-content" role="main"> 
<input type="text" data-role="datebox" 
data-options='{"mode":"calbox"}'> 
<input type="text" data-role="datebox" 
data-options='{"mode":"datebox"}'> 
<input type="text" data-role="datebox" 
data-options='{"mode":"flipbox"}'> 
<input type="text" data-role="datebox" 
data-options='{"mode":"slidebox"}'> 
<input type="text" data-role="datebox" 
data-options='{"mode":"durationbox"}'> 
</div> 
</div> 
</body> 
</html> 


在 使 用 DateBox 插件 的 网 页 中 ， 首先 需 要 加 载 DateBox 必需 的 CSS 和 JavaScript 文件 ， 然 
后 通过 <input> 元 素 的 data-role 属性 设置 日 期 选择 器 的 类 型 。data-role 属性 的 属性 值 与 某 一 种 日 
期 选择 器 文件 名 中 的 类 型 名 称 相对 应 , 例如 , 与 jqm-datebox-1.4.2.mode.calbox.js 对 应 的 日 期 选 
择 器 类 型 是 calbox， 当 使 用 日 历 类 型 的 日 期 选择 器 时 ，data-role 属性 的 属性 值 就 会 是 calbox。 
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代码 12.1 中 出 现 了 5 种 类 型 的 日 期 选择 器 ， 其 中 前 4 种 十 分 常见 ， 如 图 12.1 所 示 。 


jam webhop me 上 jam webhop me 


12.1 ”DateBox 日 期 选择 器 类 型 : calbox、datebox、fipbox、slidebox 


类 型 calbox 的 日 期 选择 器 是 一 个 月 历 。datebox 类 型 把 月 、 日 、 年 分 别 通 过 增 减 按钮 单独 
设置 。flipbox 与 datebox 类 似 ， 但 是 使 用 了 滚轮 来 代替 增 减 按钮 。slidebox 把 月 、 日 、 年 分 别 
通过 3 个 水 平滑 动 条 来 单独 设置 。 

对 一 个 DateBox 日 期 选择 器 进行 配置 主要 通过 两 种 方式 进行 。 第 一 种 方法 就 像 在 代码 12.1 
中 那样 ， 使 用 属性 data-options 来 完成 ; 第 二 种 方法 是 使 用 “长 ”格式 属性 。 当 两 者 存在 冲突 
时 ， 优 先 采 用 data-options 属性 。data-options 的 属性 值 包含 了 多 个 键 值 对 ， 每 一 个 键 值 对 用 于 
配置 日 期 选择 器 的 一 个 表现 特性 。 了 解 data-options 属性 值 中 的 键 值 对 ， 将 有 助 于 我 们 配置 
DateBox 日 期 选择 器 。 

DateBox 日 期 选择 器 在 HTML 代码 中 以 <input> 的 形式 表现 , jQuery Mobile 中 的 data-theme 
能 够 对 日 期 选择 器 做 全 局 性 的 样式 设置 。 但 是 ， 从 图 12.1 中 的 日 期 选择 器 来 看 ， 由 于 日 期 选择 
器 由 多 个 部 分 组 成 ， 只 用 单一 的 全 局 样式 设置 并 不 能 完全 体现 日 期 选择 器 中 各 个 部 分 的 特殊 
性 。 为 此 ，DateBox 为 不 同类 型 的 日 期 选择 器 提供 了 不 同 的 样式 设置 方法 。 
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表 12.1 列举 了 几 种 日 期 选择 器 的 主要 设置 选项 。 
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表 12.1 DateBox 的 配置 选项 及 其 含义 
适用 类 型 说 明 
themeDate 月 历 中 的 日 期 样式 
calbox themeDateToday “今天 ”在 月 历 中 的 样式 
themeDatePick 被 选择 的 日 期 的 (高 光 ) 样 式 
themeButton 增 / 减 按钮 的 样式 
人 themeInput 日 期 输入 框 的 样式 
durationbox 
ThemeSetButton ” “设置 日 期 ”按钮 的 样式 
flipbox themeDate 月 历 中 的 日 期 样式 
slidebox themeDatePick 被 选择 的 日 期 的 高光) 样式 


* 经 测试 ， 此 选项 在 DateBox(JQM 1.4.2) 版 本 中 无 效 ， 读 者 可 在 使 用 DateBox 时 测试 相关 选项 的 有 效 性 。 


由 于 jQuery Mobile 只 提供 了 两 种 系统 样式 , 下面 的 代码 12.2 采用 了 jQuery Mobile 的 经 典 
样式 来 演示 DateBox 日 期 选择 器 的 样式 设置 方法 。 其 中 的 样式 属性 选 自 表 12.1， 并 通过 


data-options 属性 中 的 键 值 对 方式 设置 样式 。 
代码 12.2 ”DateBox 日 期 选择 器 样式 风格 的 设置 方法 


<!DOCTYPE html> 


<html> 

<head> 
<title>jQuery Mobile 插件 </title> 
<meta charset="utf-8" /> 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 


rel="stylesheet" /> 


<link href="js/jquery-mobile-classic-theme/theme-classic.css" 


rel="stylesheet" /> 


<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<!-- DateBox 文件 --> 


<link href="plugins/datebox/css/jqm-datebox-1. 
<script src="plugins/datebox/js/jqm-datebox-1. 
<script src="plugins/datebox/js/jqm-datebox-1. 
<script src="plugins/datebox/js/jqm-datebox-1. 


</script> 


<script src="plugins/datebox/js/jqm-datebox-1.4. 


</script> 


<script src="plugins/datebox/js/jqm-datebox-1.4. 


</script> 


<script src="plugins/datebox/js/jqm-datebox-1.4. 


</script> 


心 心 心 心 


IN ND N 


D 


N 


.CSS 


CODE 


-mode. 


-mode. 


-mode. 


-mode. 


-mode. 


rel="stylesheet" /> 


.js"></script> 


calbox.js"></script> 
datebox.js"> 


slidebox.js"> 


flipbox.js"> 


durationbox.js"> 
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<script 
src="plugins/datebox/il8n/jquery.mobile.datebox.il8n.zh-CN.utf8.js"> 
</script> 


</head> 


<body> 


<div data-role="page" data-theme="b"> 
<div data-role="header"> 
<h1>DateBox</h1> 
</div> 
<div class="ui-content" role="main"> 
<input type="text" data-role="datebox"™" 
data-options='{"mode":"calbox", 
"themeDate":"e", 
"themeDateToday":"c", 
"themeDatePick":"a"}'> 
<input type="text" data-role="datebox" 
data-options='{"mode":"datebox", 
"themeSetButton":"a", 
"themeButton":"b", 
"themeInput":"e"}'> 
<input type="text" data-role="datebox" 
data-options=' {"mode":"flipbox", 
"themeDate":"e", 
"themeDatePick":"b"}'> 
<input type="text" data-role="datebox" 
data-options='{"mode":"slidebox", 
"themeDate": "e", 
"themeDatePick":"b"}'> 
<input type="text" data-role="datebox" 
data-options='{"mode":"durationbox", 
"themeButton":"b", 
"themeInput":"e"}'> 
</div> 
</div> 


</body> 

</html> 

这 段 代码 中 的 callbox、flipbox 和 durationbox 的 显示 效果 如 图 12.2 所 示 。 

DateBox 对 多 国语 言 的 支持 是 通过 附加 的 语言 包 实现 的 。 在 代码 12.1 和 12.2 中 ， 我 们 都 
可 以 看 到 简体 中 文 语言 包 jquery.mobile.datebox.i18n.zh-CN.utf8.jjs 被 加 载 到 网 页 中 。DateBox 插 


件 允 许 在 


E 同 一 个 网 页 中 同时 支持 多 种 语言 ， 前 提 条 件 是 相应 的 语言 包 必须 加 载 到 网 页 中 。 每 一 


个 语言 资源 文件 是 一 段 JavaScript 代码 ， 当 多 个 JavaScript 语言 资源 文件 被 依次 加 载 到 网 页 以 
后 ， 最 后 一 个 被 加 载 的 语言 被 当 作 当前 网 页 的 默认 语言 。 

代码 12.3 中 使 用 了 3 个 callbox 月 历 ， 第 一 个 月 历 使 用 网 页 的 默认 语言 ， 即 最 后 加 载 的 
JavaScript 语言 资源 文件 ， 它 的 文件 名 指出 了 这 个 文件 对 应 了 ISO 语言 代码 zh-CN( 中 文 简体 )。 
第 二 个 月 历 使 用 useLang 配置 选项 ， 指 出 语言 代码 是 zh-TW( 中 文 繁体 )， 而 第 三 个 月 历 使 用 的 
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语言 代码 是 en( 英 语 )。 
[> | ECEEEEEEEEEEEEE ZTE 


jam webhop me : am webhop me 


一 月 2015 


leisloinlslsls 
12.2 ”被 设置 了 样式 的 calbox、 人 ipbox 和 durationbox 


代码 12.3 DateBox 插 件 i18n 


<!DOCTYPE html> 

<html> 

<head> 
<title>jQuery Mobile 插件 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 

rel="stylesheet" /> 

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<!-- DateBox 文件 --> 
<link href="plugins/datebox/css/jqm-datebox-1.4.2.css" rel="stylesheet"/> 
<script src="plugins/datebox/js/jqm-datebox-1.4.2.core.js"></script> 
<script src="plugins/datebox/js/jqm-datebox-1.4.2.mode.calbox.js"></script> 
<script src="plugins/datebox/js/jqm-datebox-1.4.2.mode.datebox.js"> 
</script> 
<script src="plugins/datebox/js/jqm-datebox-1.4.2.mode.slidebox.js"> 
</script> 
<script src="plugins/datebox/js/jqm-datebox-1.4.2.mode.flipbox.js"> 
</script> 
<script src="plugins/datebox/js/jqm-datebox-1.4.2.mode.durationbox.js"> 


</script> 

<script src="plugins/datebox/il8n/jquery.mobile.datebox.il8n.en.utf8.js"> 

</script> 

<script 
src="plugins/datebox/il8n/jquery.mobile.datebox.il8n.zh-TW.utf8.js"> 

</script> 

<script 
src="plugins/datebox/il8n/jquery.mobile.datebox.il8n.zh-CN.utf8.js"> 
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</script> 


</head> 


<body> 
<div data-role="page"> 
<div data-role="header"> 


<h1>DateBox</h1> 
</div> 
<div class="ui-content" role="main"> 
<input type="text" data-role="datebox" 
data-options="' {"mode":"calbox"}'> 
<input type="text" data-role="datebox" 
", "useLang":"zh-TW"}'> 


data-options=' {"mode":"calbox", 
<input type="text" data-role="datebox" 
data-options=' {"mode":"calbox", "useLang":"en"}'> 


</div> 
</div> 
-个 网 页 中 就 出 现 了 3 个 使 用 不 同 语言 设置 的 月 历 ， 如 图 12.3 所 示 。 
[= EE IECIEZFEI 
Jam webhop me 
choose Date 


January 2015 
mmm 


</body> 
</html> 


这 样 ， 在 同 
[2 6 | 


jam.webhop.me 


图 12.3 通过 useLang 选 项 对 同一 个 网 页 中 的 不 同 DateBox 组 件 设置 不 同 的 语言 


窗口 插件 - Windows 


i122 
jQuery Mobile Windows 插 件 ? 和 DateBox 都 是 由 同一 个 组 织 开 发 的 ， 两 者 的 授权 方式 相同 。 
Windows 插 件 实际 上 分 为 两 个 模块 ， 即 AlertBox 和 mDialog。 这 两 个 模块 实现 的 功能 分 别 用 于 替代 


@ jQuery Mobile Windows 项 目 网 站 : https://github.conyjtsage/jquery-mobile-windows。 


412 


第 12 章 jQuery 和 jQuery Mobile 的 插件 


JavaScript 的 警告 窗口 (alert0) 和 其 他 种 类 的 对 话 框 。 
12.2.1 警告 窗口 


AlertBox 借助 于 jQuery Mobile 中 的 弹出 窗口 (Popup 组 件 ) 实 现 了 弹出 警告 窗口 的 功能 。 它 
实际 上 是 一 个 被 进一步 定制 的 弹出 窗口 , 而且 AlertBox 警告 窗口 不 需要 通过 网 页 上 的 按钮 或 者 
其 他 程序 代码 打开 。 当 一 个 网 页 打开 时 ，AlertBox 警告 窗口 会 自动 打开 ， 并 且 在 5 秒 钟 以 后 自 
动 关闭 。AlertBox 的 使 用 方法 只 需要 在 标准 的 jQuery Mobile 弹出 窗口 之 上 稍 加 修改 即 可 。 

我 们 可 以 从 代码 12.4 中 看 到 AlertBox 的 基本 使 用 方法 。 


代码 12.4 AlertBox 的 基本 使 用 方法 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile 插件 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<!-- Windows (alert) 文件 --> 
<script src="plugins/windows/js/jqm-windows.alertbox.js"></script> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<hl>Windows (AlertBox)</hl> 
</div> 
<div class="ui-content" role="main"> 
<div data-role="popup" id="myAlert" 
class="ui-content jqm-alert-box"> 
<a href="#" data-rel="back" data-role="button" 
data-icon="delete" data-iconpos="notext" 
class="ui-btn-right"> 关 闭 </a> 
<p style="text-align:center"> 
jQuery Mobile Windows 插件 -警告 窗口 
</p> 
</div> 
<a href="#myAlert" data-role="button" data-rel="popup"> 
再 次 打开 警告 窗口 
</a> 
</div> 
</div> 
</body> 
</html> 
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使 用 AlertBox 需要 以 下 3 个 步 
(D) 加 载 AlertBox 插件 Jqm-windows.alertbox.js。 


(2) 在 网 页 中 定义 一 个 弹出 窗口 (data-role="popup”)。 一 一 一 | 
(3) 对 弹出 窗口 添加 CSS 类 jqm-alert-box。 i b 
在 代码 12.4 中 ， 还 有 一 些 细节 需要 说 明 : 

@ AlertBox 警告 窗口 中 的 id 值 “myAlert* 并 不 是 被 tie 


AlertBox 插件 使 用 , 而 是 被 网 页 上 的 一 个 按钮 引用 。 当 
点 击 这 个 按钮 时 ， 已 经 自动 关闭 的 警告 窗口 会 再 次 以 
常规 的 弹出 窗口 方式 打开 (不 会 自动 关闭 )。 
@ AlertBox 警告 窗口 中 被 赋予 了 CSS 类 ui-content。 这 个 
类 在 这 里 只 是 用 于 设置 文字 与 警告 窗口 边界 之 间 的 空 
白 距离 。 代 码 12.4 中 ， 当 警告 窗口 打开 时 ， 其 显示 效 
果 如 图 12.4 所 示 。 | 4 0 ao | 
-个 自动 打开 的 AlertBox 警告 窗口 默认 5 秒 以 后 自动 关闭 。 
窗口 的 停留 时 间 以 及 警告 窗口 在 打开 和 关闭 发 生 时 的 动画 效果 。 ”图 124 AlertBox 警告 窗口 
(有 关 动 画 特效 ， 可 参考 本 书 的 5.3 节 ) 可 以 通过 表 12.2 中 的 配置 选项 来 设置 。 


表 12.2 AlertBox 的 配置 属性 及 其 含义 


data-alertbox-close-time AlertBox 警告 窗口 从 自动 打开 到 自动 关闭 之 间 的 时 间 间 隔 (单位 ， 毫 秒 ) 
data-alertbox-transition 弹出 窗口 的 动画 特效 ， 默 认 值 为 "pop” 


把 下 面 的 一 行 代码 替换 到 代码 12.4 中 ， 就 能 使 警告 窗口 的 停留 时 间 延 长 到 10 秒 ， 并 且 打 
开 和 关闭 警告 窗口 的 动画 特效 被 设置 为 “slide”: 
<div data-role="popup" class="ui-content jqm-alert-box" 


data-alertbox-close-time="10000" 
data-alertbox-transition="slide"> 


12.2.2 ”对 话 窗口 


Windows 插件 中 mDialog 模块 又 把 对 话 窗口 分 为 Bar( 弹 出 窗口 ) 模 式 和 Menu( 菜 单 ) 模 式 。 
图 12.5~12.7 分 别 演示 了 3 种 不 同类 型 的 对 话 窗口 。 即 使 各 种 mDialog 对 话 窗口 在 网 页 上 的 表 
现 略 有 不 同 ， 从 编程 方法 的 角度 来 看 ， 这 些 对 话 窗口 都 需要 一 个 触发 条 件 ， 并 且 都 是 通过 
mdialog0 方 法 中 的 配置 参数 来 完成 的 。 

1. 弹出 窗口 模式 


弹出 窗口 模式 与 上 一 小 节 介绍 的 警告 窗口 有 一 点 类 似 ， 两 者 的 主要 区 别 是 : 
@ ”Bar 模式 弹出 窗口 需要 一 个 触发 事件 ， 而 不 是 当 页 面 加 载 时 自动 显示 ; 
@ ”Bar 模式 会 自动 使 屏幕 背景 变 暗 。 

代码 12.5 演示 了 一 个 Bar 模式 弹出 窗口 的 基本 编写 方法 。 


414 < 心 


第 12 章 jQuery 和 jQuery Mobile 的 插件 


Jam.webhop.me Jam webhop me 


图 12.5 弹出 窗口 12.6 ” 带 有 按钮 的 对 话 窗口 图 12.7 带 有 列表 的 对 话 窗口 


代码 12.5 mDialog 弹出 窗口 模式 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile 插件 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<!-- Windows (mDialog) 系统 文件 --> 
<script src="plugins/windows/js/jqm-windows.mdialog.js"></script> 
<!-- mDialog:Bar --> 
<script> 
$ (document) .on ("tap", "#myDialog", function() { 
$("<div>") .mdialog ({ 
popDismissable: false, 


closeButton: ES 
content: "文本 内 容 " 
DD); 
]) 
</script> 
</head> 


<body> 
<div data-role="page" id="mDialogDemol"> 
<div data-role="header"> 
<hl>Windows (mDialog:Bar)</hl> 
</div> 
<div class="ui-content" role="main"> 
<a href="#" id="myDialog" data-role="button"> 
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打开 对 话 窗口 
过 /二 
</div> 
</div> 
</body> 
</html> 


代码 12.5 实现 了 图 12.5 中 的 弹出 窗口 。 在 网 页 的 正文 中 除了 一 个 用 于 触发 弹出 窗口 的 按 
钮 以 外 ， 并 没有 关于 弹出 窗口 的 任何 代码 。 

弹出 窗口 是 在 JavaScript 代码 8(“<div>”).mdialog({ .… }): 中 实现 的 。 这 是 mDialog 对 话 窗 口 
的 通用 编程 方法 ， 差 别 仅 仅 在 于 括号 中 的 配置 参数 。closeButton 参数 用 于 设置 关闭 按钮 的 显示 
位 置 ，content 参数 包含 了 弹出 窗口 的 实际 显示 内 容 ，popDismissable 参数 表示 弹出 窗口 必须 等 
待 用 户 动作 才 会 被 关闭 。 

2. 菜单 模式 


图 12.6 和 图 12.7 中 的 对 话 窗口 属于 菜单 模式 。 当 对 话 窗口 运行 在 菜单 模式 时 ， 一 个 窗口 
会 分 成 标题 栏 和 正文 内 容 两 个 部 分 。 在 正文 部 分 中 ， 除 了 对 话 窗口 需要 显示 的 正文 内 容 以 外 ， 
对 话 窗口 还 会 显示 一 个 菜单 。 菜 单 可 以 通过 按钮 方式 显示 ， 也 可 以 通过 列表 方式 显示 。 

代码 12.6 实现 了 图 12.6 中 带 有 按钮 的 对 话 窗口 。 

代码 12.6 ”mDialog 菜单 模式 (按钮 方式 ) 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile 插件 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<!-- Windows (mDialog) 系统 文件 --> 
<script src="plugins/windows/js/jqm-windows.mdialog.js"></script> 


<!-- mDialog:Button --> 

<script> 

$ (document) .on ("tap", "#myDialog", function() { 

$ ("<div>") .mdialog ({ 

useMenuMode: true, 
menuButtonType: 'button’', 
popDismissable: false, 
closeButton: true, 
menuHeaderText: ' 按 钮 样式 '， 
menuSubtitle: ' 请 选择 ?'， 
menuMinWidth: '300px', 
buttons: { 


' 同 意 ': { 
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click: function () { 
$("#result") .text ("你 提交 的 结果 是 : 同意 ") ; 


click: function () { 
$("#result") .text ("你 提交 的 结果 是 : 反对 ") ; 


}, 
icon: "delete", 
theme: "b", 
y 
小 
Ds; 
1D); 
</script> 
</head> 
<body> 


<div data-role="page" id="mDialogDemol"> 
<div data-role="header"> 
<hl>Windows (mDialog:Button)</h1l> 
</div> 
<div class="ui-content" role="main"> 
<a href="#" id="myDialog" data-role="button"> 
打开 对 话 窗口 
</a> 
<div id="result"> 你 提交 的 结果 是 : . . .</div> 
</div> 
</div> 
</body> 
</html> 
从 代码 12.6 中 使 用 的 配置 参数 可 以 看 到 ，useMenuMode 参数 指明 了 对 话 窗口 的 工作 状态 
是 菜单 模式 ，menuButtonType 进一步 说 明了 菜单 将 通过 按钮 方式 显示 ，menuHeaderText 定义 
了 对 话 窗口 标题 栏 中 的 文字 , menuSubtitle 定义 了 对 话 窗 口 正 文 的 内 容 , menuMinWidth 用 于 说 
明 对 话 窗口 至 少 需要 占用 的 屏幕 宽度 。 另 外 , 在 配置 参数 中 还 包括 了 两 个 按钮 :“ 同 意 ” 和 “ 反 
对 ”。 对 每 一 个 按钮 都 可 以 单独 设置 按钮 事件 处 理 程 序 ， 按 钮 的 样式 风格 (默认 值 相 当 于 
data-theme=“a”)， 以 及 按钮 中 使 用 的 图 标 ( 默 认 图 标 为 jQuery Mobile 系统 图 标 “check”)。 
当 对 话 窗口 中 采用 如 图 12.7 所 示 的 列表 方式 时 , 代码 只 需要 做 少量 的 修改 。 主 要 的 变化 是 
menuButtonType 参数 值 为 “list"， 说 明了 对 话 窗 口中 的 按钮 将 以 列表 方式 显示 。 
代码 12.7 演示 了 带 有 列表 的 对 话 窗口 的 编写 方法 。 这 段 代 码 出 现 了 一 个 新 的 参数 
“taansition"， 弹 出 窗口 默认 的 动画 特效 是 pop”"， 我 们 可 以 把 一 个 对 话 窗口 设置 成 其 他 jQuery 
Mobile 支持 的 弹出 窗口 动画 特效 。 


代码 12.7 mDialog 菜单 模式 (列表 方式 ) 


<!DOCTYPE html> 
<html> 
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<head> 
<title>jouery Mobile 插件 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<!-- Windows (mDialog) 系统 文件 --> 
<script src="plugins/windows/js/jqm-windows.mdialog.js"></script> 
<I—— mDialog bist 二 一 > 
<script> 
$ (document) .on ("tap", "#myDialog", function() { 
$ ("<div>") .mdialog ({ 
useMenuMode: true, 
menuButtonType: 'list', 
popDismissable: false, 
closeButton: true, 
menuHeaderText: ' 列 表 样式 '， 
menuSubtitle: ' 请 选择 ?' ， 
menuMinWidth: '300px', 
transition: Ee 
buttons: { 
' 第 一 选项 ': { 
click: function () { 


$("#result") .text ("你 提交 的 结果 是 : 1") ; 


}, 
"第 二 选项 ' : { 
click: function () { 


$("#result") .text (" 你 提交 的 结果 是 : 2") ; 


}, 
"第 三 选项 ' : { 
click: function () { 


$("#result") .text ("你 提交 的 结果 是 : 3") ; 


} 
1D; 
I 
</script> 
</head> 
<body> 


<div data-role="page" id="mDialogDemol"> 
<div data-role="header"> 
<hl>Windows (mDialog:List)</hl> 
</div> 
<div class="ui-content" role="main"> 
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<a href="#" id="myDialog" data-role="button"> 
打开 对 话 窗口 
</a> 
<div id="result"> 你 提交 的 结果 是 : - - -</div> 
</div> 
</div> 
</body> 
</html> 


对 于 一 个 mDialog 对 话 窗 口 ，closeButton 允许 使 用 的 参数 值 包括 “left*"、“right* 和 true。 这 
些 参数 值 分 别 用 于 指定 对 话 窗口 中 关闭 按钮 的 显示 位 置 ， 或 者 不 为 对 话 窗口 添加 关闭 按钮 。 


12.3 ”图片 插件 - OWL Carousel 


OWL Carousel? 是 一 个 简单 易 用 的 jQuery 插件 ， 通 过 MIT 许 可 证 方式 授权 。OWL Carousel 
用 于 展示 一 系列 图 片 ， 形 成 一 个 类 似 走 马 灯 的 效果 ， 并 且 支 持 触摸 屏 上 的 滑动 操作 ， 以 及 自动 
播放 、 自 动 分 页 等 功能 。 

我 们 先 从 代码 12.8 为 起 点 ， 逐 步 了 解 OWL Carousel 插件 的 应 用 技巧 。 


代码 12.8 OWL Carousel 的 基本 用 法 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile 插件 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<! 一 OWL Carousel 系统 文件 --> 
<link href="plugins/owl/owl-carousel/owl.carousel.css" rel="stylesheet"/> 
<link href="plugins/owl/owl-carousel/owl.theme.css" rel="stylesheet"/> 
<script src="plugins/owl/owl-carousel/owl .carousel .min.js"></script> 
<style> 
.Owl-carousel img { 
width: 100%; 
height: auto; 
} 
.Owl-carousel .item { 
margin: 3px; 
</style> 


@ OWL Carousel 项 目 网 站 : http://owlgraphic.com/owlcarousel/。 
> 419 


关 jQuery Mobile 移 动 网 站 开发 


420 < 


<script> 
$ (document) .on ("pagecreate", function() { 
$(".owl-carousel") .owlCarousel (); 
Ds; 
</script> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<hl>Owl Carousel</h1> 
</div> 
<div class="ui-content" role="main"> 
<div class="owl-carousel"> 
<div class="item"> 


<img src="images/beijing 01.jpg" alt=" 北 京 故宫 "> 


</div> 
<div class="item"> 


<img src="images/beijing 02.jpg" alt=" 北 京 天 坛 "> 


</div> 
<div class="item"> 


<img src="images/beijing 03.jpg" alt=" 北 京 颐和园 "> 


</div> 
<div class="item"> 

<img src="images/shanghai 01.jpg" 
</div> 
<div class="item"> 

<img src="images/shanghai 02.jpg" 
</div> 
<div class="item"> 

<img src="images/shenyang 01.jpg" 
</div> 
<div class="item"> 

<img src="images/shenyang 02.jpg" 
</div> 
<div class="item"> 


alt=" 上 海 科技 馆 "> 


alt=" 上 海 城 隐 庙 "> 


alt=" 沈 阳 清 昭 陵 "> 


alt=" 沈 阳 清 昭 陵 "> 


<img src="images/suzhou 01.jpg" alt=" 苏 州 木 渎 "> 


</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


OWL Carousel 在 网 页 中 由 三 个 部 分 组 成 : 


@ OWL Carousel 程 序 库 ,包括 一 个 JavaScript 文件 和 两 个 CSS 文件 .其 中 的 owLtheme.css 


是 一 个 可 选 文件 。 图 片 下 面 有 一 些 用 于 分 页 的 小 圆 点 (pagination)。 这 些 灰 色 的 小 


的 样式 就 定义 在 这 个 可 选 的 CSS 文件 中 的 。 


@ 在 网 页 正文 中 定义 一 个 由 CSS 类 或 者 id 值 标识 的 <div> 元 素 。 这 个 元 素 将 作为 所 有 需 
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要 显示 的 图 片 的 容器 。 


在 网 页 初始 化 过 程 中 通过 $(“.owl-carousel”).owlCarousel0; 对 图 片 的 容器 进行 初始 化 。 


$(“.owl-carousel”) 中 的 CSS 类 名 在 网 页 中 用 于 标识 一 个 图 片 容器 。 


代码 12.8 的 运行 效果 如 图 12.8 所 示 。 


jam webhop.me 1 


Ow Carousel 


OW Carousel 


= 才 , bb、 杞 ~ 
. 


12.8 ”相同 的 OWL Carousel 在 Nexus 4 和 桌面 Chrome 浏 览 器 中 的 显示 效果 


在 代码 12.8 中 ， 每 一 张 图 片 又 被 另外 包装 在 一 个 <div> 元 素 中 ， 这 个 图 片 容器 并 不 是 必需 
的 。 由 于 默认 情况 下 图 片 之 间 没 有 间隙 。 每 一 幅 图 片 所 占 屏幕 的 宽度 已 经 被 OWL Carousel 根 
据 屏幕 的 宽度 (单位 为 pg) 事先 计算 确定 ， 如 果 需 要 在 两 张 图 片 之 间 增 加 间隙 ， 就 需要 把 CSS 
的 margin 属性 赋予 每 一 个 图 片 单独 的 容器 ， 就 像 代码 中 的 CSS 类 选择 器 “.owl-carousel .item” 
所 指出 的 那样 。 

OWL Carousel 决定 一 个 屏幕 最 多 显示 几 幅 图 片 的 因素 是 屏幕 宽度 ， 而 不 是 图 片 的 大 小 。 
根据 屏幕 宽度 ，OWL Carousel 把 显示 设备 分 为 以 下 6 类 : 


大 屏幕 ( 宇 1200px)。 

桌面 系统 (980~1199px)。 

小 屏幕 桌面 系统 (769~979px)。 

平板 电脑 (480~768px)。 

小 屏幕 平板 电脑 (默认 忽略 此 选项 )。 
手机 (478px)。 
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在 以 上 $ 类 设备 上 (小 屏幕 平板 电脑 被 忽略 )JOWL Carousel 将 默认 在 一 个 屏幕 上 分 别 显 示 5、 
4、3、2、1 幅 图 片 。 以 上 这 些 默 认 设 置 可 以 在 OWL Carousel 初始 化 过 程 中 通过 参数 进行 修改 。 
表 12.3 列举 了 常用 的 初始 化 参数 及 其 默认 值 。 


表 12.3 OWL Carousel 常 用 的 初始 化 参数 及 其 默认 值 


属 性 说 明 
i 当 屏幕 宽 度 足够 大 时 ， 在 同一 个 屏幕 上 最 多 能 够 同时 显示 的 图 
片 数量 
当 屏 幕 宽度 小 于 等 于 1199px 时 ， 在 同一 个 屏幕 上 同时 显示 4 
itemsDesktop [1199,4] 幅 图 片 。 数 组 中 第 一 个 参数 代表 了 屏幕 的 最 大 宽度 ， 第 二 个 参 
数 代表 了 同时 显示 图 片 的 数量 
当 屏 幕 宽度 小 于 等 于 979px 时 ， 在 同一 个 屏幕 上 同时 显示 3 幅 
itemsDesktopSmall [979,3] 图 片 
当 屏 幕 宽度 小 于 等 于 768px 时 ， 在 同一 个 屏幕 上 同时 显示 2 幅 
itemsTablet [768,2] 
图 片 
itemsTabletSmall false 系统 没有 定义 这 一 类 设备 的 宽度 ， 沿 用 itemsTablet 的 设置 
itemsMobile 479,1 当 屏 幕 宽度 小 于 等 于 479px 时 ,在 同一 个 屏幕 上 只 显示 1 幅 图 片 
ee a 通过 一 系列 数组 自 定义 屏幕 宽度 和 同时 显示 图 片 数量 的 组 合 ， 
用 于 取代 默认 的 6 类 屏幕 设置 
singleItem false 当 该 参数 为 true 时 ， 每 一 个 屏幕 只 能 显示 一 幅 画 面 
itemsScaleUp false 当 该 参数 为 tue 时 ， 图 片 将 被 放大 
slideSpeed 200 图 片 移动 速度 ， 单 位 为 毫秒 
paginationSpeed 800 图 片 分 页 (通过 图 片 下 方 的 灰色 圆 点 ) 的 移动 速度 ， 单 位 为 毫秒 
rewindSpeed 1000 图 片 回 滚 速度 ， 单 位 为 毫秒 
autoPla false 当 该 参数 为 tue 时 ， 图 片 自动 播放 
navigation false 当 该 参数 为 true 时 ， 先 是 两 个 导航 按钮 
navigationText [prev”, “nexf"] | 通过 数组 设置 导航 按钮 中 的 文字 
pagination true 当 该 参数 为 true 时 ， 显 示 用 于 分 页 的 小 圆 点 
paginationNumbers false 通过 页 号 方式 显示 分 页 (用 于 分 页 的 灰色 与 小 圆 点 被 取代 ) 
如 果 OWL Carousel 仅 使 用 在 桌面 浏览 器 中 ， 可 以 把 该 参数 设 
2 a 置 为 lse， 以 取消 对 浏览 器 宽度 的 检测 
a 默认 采用 了 OWL Carousel 系统 自 带 的 样式 风格 。 该 参数 可 以 


用 于 设置 其 他 已 经 定义 的 样式 风格 


代码 12.9 通过 初始 化 参数 对 OWL Carousel 进行 了 设置 ， 包 括 增加 了 自动 播放 功能 ， 使 用 
了 数字 化 的 分 页 方法 ， 蔡 换 了 默认 的 导航 按钮 文字 ， 其 中 ， 最 重要 的 是 更 改 了 默认 的 屏幕 宽度 
与 显示 图 片 数 量 的 关系 。 
当 itemsMobile 参数 值 为 false 时 ， 系 统 默 认 值 [479.1] 被 忽略 ， 当 屏幕 宽度 小 于 600px 时 ， 
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采用 itemsTablet: [600,3] 中 的 设置 , 即 一 个 屏幕 显示 3 幅 图 
片 ， 如 图 12.9 所 示 。 

如 果 更 仔细 地 研究 一 下 这 段 代码 对 屏幕 宽度 的 划分 ， 
可 以 看 到 屏幕 宽度 被 划分 为 4 类。 依据 屏幕 宽度 大 小 ， 每 
-个 屏幕 分 别 能 够 显示 图 片 的 数量 是 12、9、6、3。 

由 于 代码 12.9 中 一 共 只 有 8 幅 图 片 ， 当 我 们 把 这 个 页 
面 显示 在 桌面 浏览 器 中 ， 并 且 改 变 浏览 器 窗口 的 大 小 时 ， 
就 会 看 到 浏览 器 窗口 中 同时 显示 的 图 片 数量 只 能 是 3、6， 
或 者 8。 这 是 由 OWL Carousel 初始 化 参数 决定 的 。 


代码 12.9 对 OWL Carousel 进 行 初始 化 设置 


<!DOCTYPE html> 

<html> 

<head> 
<title>jQuery Mobile 插件 </title> 
<meta charset="utf-8" /> 


jQuery 和 jQuery Mobile 的 禁 件 


图 12.9 ”通过 更 改 屏幕 宽度 与 每 一 
屏幕 显示 图 片 数量 的 关系 ， 


<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 


rel="stylesheet" /> 


<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<link href="plugins/owl/owl-carousel/owl.carousel.css" rel="stylesheet"/> 
<link href="plugins/owl/owl-carousel/owl.theme.css" rel="stylesheet"/> 


<script src="plugins/owl/owl-carousel/owl.carousel.min.js"></script> 


<style> 
.Owl-carousel img { 
width: 100%; 
height: auto; 
} 


.OWwl-carousel .item { 
margin: 3px? 
} 
</style> 
<script> 
$ (document) .on ("pagecreate", function() { 
$(".owl-carousel") .owlCarousel ({ 


items : I 
itemsDesktop : [1600，9] ， 
itemsDesktopSmall : [1024,6], 
itemsTablet: [600,3] ， 
itemsMobile : false, 
autoPlay: true, 
slideSpeed: 300 ， 
rewindSpeed: 1200 ， 
navigation: true, 


PaginationNumbers: true, 
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navigationText: | | 
Dy 
Ds; 
</script> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<hl>Ow1l Carousel</h1> 
</div> 
<div class="ui-content" role="main"> 
<div class="owl-carousel"> 
<div class="item"> 
<img src="images/beijing_01.jpg”alt=" 北 京 故 宫 "> 
</div> 
<div class="item"> 
<img src="images/beijing_02.jpg”alt=" 北 京 天 坛 "> 
</div> 
<div class="item"> 
<img src="images/beijing 03.jpg" alt=" 北 京 颐和园 "> 
</div> 
<div class="item"> 
<img src="images/shanghai 01.jpg" alt=" 上 海 科 技 馆 "> 
</div> 
<div class="item"> 
<img src="images/shanghai_02.jpg"” alt=" 上 海 城 隐 庙 "> 
</div> 
<div class="item"> 
<img src="images/shenyang_01.jpg”alt=" 沈 阳 清 昭 陵 "> 
</div> 
<div class="item"> 
<img src="images/shenyang 02.jpg" alt=" 沈 阳 清 昭 陵 "> 
</div> 
<div class="item"> 
<img src="images/suzhou_01.jpg”alt=" 苏 州 木 渎 "> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


12.4 ” ”Google 地 图 


Google 地 图 并 不 是 一 个 jQuery 或 者 jQuery Mobile 的 插件 。 它 是 一 套 功 能 强大 的 API， 以 
Google 地 图 服务 为 依托 ， 向 网 页 、Android， 或 者 iOS 等 不 同 的 客户 端 提供 不 同类 型 的 编程 接 
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口 。 从 Web 客户 端的 角度 来 看 ，Google 提供 了 一 套 以 JavaScript 为 基础 的 在 线 服务 。 我 们 可 以 
很 容易 地 把 这 些 服务 应 用 到 jQuery Mobile 网 页 中 。 


1. 基本 地 图 功能 


在 网 页 上 实现 最 基本 的 Google 地 图 ， 需 要 以 下 几 个 步骤 。 

(1) 加 载 Google 地 图 在 线 JavaScript 服务 。 

(2) 在 网 页 上 定义 一 个 用 于 显示 地 图 的 区 域 。 

(3) 设置 地 图 属性 。 

(4) 初始 化 地 图 。 

(5) 设置 地 图 事件 监听 程序 。 

代码 12.10 通过 一 个 简单 的 实例 ， 在 网 页 上 显示 以 上 海 市 人 民 广 场 为 中 心 的 地 图 。 


代码 12.10 ”基本 地 图 服务 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile 插件 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<style> 


#map-canvas { 
width: 100%; 
height: 450px; 
minheight: 350px; 
} 
</style> 
<script src="http://maps.google.cn/maps/api/js"></script> 
<script> 
function initialize() { 
Var mapOptions = { 
center:new google.maps.LatLng (31.23136,121.47004), 
zoom:15, 
mapTypelId:google .maps .MapTypeId .ROADMAP 
] 
var map=new google.maps.Map (document.getElementById( 
"map-canvas"), mapOptions); 
} 
google.maps .event .addDomListener (window, 'load', initialize); 
</script> 
</head> 
<body> 


<div data-role="page" data-theme="a"> 
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<div data-role="header"> 
<hl>Google 地 图 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div id="map-canvas"></div> 
</div> 
</div> 
</body> 
</html> 
Google 地 图 为 Web 客户 端 提 供 了 一 套 JavaScript API 在 线程 序 库 .Google 通过 不 同 的 URL 
提供 这 套 在 线 API。 中 国境 内 的 用 户 需要 使 用 http://maps.google.cn/maps/apijs。 在 使 用 Google 
地 图 API 时 还 需要 注意 ， 当 通过 经 纬度 设置 地 图 的 中 心 点 时 ，LatLng0 方 法 的 第 一 个 参数 是 纬 
度 ， 第 二 个 参数 是 经 度 。 例 如 ， 在 center:new google.maps.LatLng(31.23136, 121.47004) 中 ， 经 
纬度 是 (121.47004, 31.23136)。 
-个 地 图 必须 设置 放大 系数 。 当 放大 系数 为 0 时 ,我们 将 看 到 一 幅 世 界 地 图 。 随 着 放大 系 
数 的 增 大 ， 我 们 就 能 够 看 到 一 幅 更 加 精确 的 地 图 。 
图 12.10 演示 了 代码 12.10 中 放大 系数 为 15 的 显示 效果 。 当 放大 系数 为 8 或 者 17 时 ， 效 
果 如 图 12.11 所 示 。 


中 Google 地 图 下 


Google 地 图 


12.10 在 线 Google 地 图 12.11 放大 系数 分 别 为 8 和 17 时 的 地 图 
当 我 们 为 地 图 设置 初始 化 参数 时 ， 可 以 为 地 图 选 定 显示 类 型 。 
默认 的 类 型 是 道路 图 amapTypeId:google.maps.MapTypeIdROADMAP)， 我 们 还 可 以 把 地 图 
设置 为 SATELLITE( 卫 星 照片 )、 HYBRID( 卫 星 照 片 与 道路 混合 地 图 ), 或 者 TERRAIN( 地 形 图 )。 
图 12.12 是 八达岭 长 城 地 区 的 地 图 以 不 同 的 方式 显示 的 情况 。 
2. 地 图 上 的 标记 


通常 ， 我 们 需要 在 地 图 上 标注 一 些 地 点 ， 比 如 一 个 地 址 或 者 建筑 物 等 。Google 地 图 API 
只 需要 在 一 个 基本 地 图 上 增加 一 些 “ 中 心 点 ”， 就 能 够 在 地 图 上 把 这 些 地 点 标注 出 来 。 
代码 12.11 演示 了 在 上 海 人 民 广 场 附近 标注 上 海 市 政府 和 上 海 博物 馆 位 置 的 方法 。 
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加 Googe 地 图 | Bcooge 二 


coolesem Cem cooiemem Cocoiem 才 


图 12.12 ”八达岭 长 城 地 区 的 道路 图 、 卫 星 地 图 、 混 合 地 图 和 地 形 图 


代码 12.11 地 点 标注 的 方法 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile 插件 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<style> 
#map-canvas { 
width: 100%; 
height: 450px; 


minheight: 350px; 
} 
</style> 
<script src="http://maps.google.cn/maps/api/js"></script> 
<script> 
Var center peopleSquare 
= new google.maps.LatLng (31.229335, 121.474573); 
Var center shanghaiMuseum 
= new google.maps.LatLng(31.227844, 121.475211); 
var center cityOfShanghai 
= new google.maps.LatLng(31.230331, 121.473216); 
function initialize() { 
Var mapOptions = { 
center:center peopleSquare, 
Zoom:16, 
mapTypelId:google.maps .MapTypeId.ROADMAP 
}; 
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Var map = new google.maps.Map (document .getElementById( 
"map-canvas"), mapOptions); 

// 

Var markerl=new google.maps.Marker ({ 
position: center shanghaiMuseum, 

]) 7 

marker1.setMap (map); 

// 

Var marker2=new google.maps.Marker({ 
了 Position:center cityOfShanghai, 

hs 

marker2 . setMap (map); 

} 


google.maps .event .addDomListener (window, 'load', initialize); 
</script> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<hl>Google 地 图 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div id="map-canvas"></div> 
</div> 
</div> 
</body> 
</html> 
在 地 图 上 做 标记 时 ， 首 先 需要 创建 一 个 标记 对 象 google.maps.Marker， 并 未 标记 对 象 设置 
中 心 点 。 当 标记 对 象 创建 以 后 ， 标 记 对 象 会 把 自己 绑 定 到 一 个 指定 的 地 图 对 象 中 。 
多 个 标记 对 象 可 以 绑 定 到 同一 个 地 图 对 象 中 ， 因 此 ， 一 个 地 图 就 获得 了 多 个 地 点 标记 ， 如 
图 12.13 所 示 。 
3. 地 图 上 的 控件 


-个 地 图 常常 带 有 一 些 控 件 ， 用 于 控制 地 图 的 显示 和 操作 。 这 些 控件 是 否 在 地 图 上 显示 ， 

可 以 在 地 图 对 象 的 初始 化 参数 中 设置 。 

代码 12.12 演示 了 4 个 常用 的 控件 。 

@ ”zoomControl: 缩放 控件 。 

@ mapTypeControl: 地 图 类 型 控件 。 

@ scaleControl: 标尺 控件 。 

@ streetViewControl: 街景 控件 。 

在 地 图 对 象 初始 化 过 程 中 , 对 这 些 控件 设置 tue 或 者 false, 就 可 以 在 地 图 上 打开 或 者 关闭 
这 些 控件 。 

代码 12.12 演示 了 设置 这 些 控件 的 简要 方法 ， 显 示 效 果 如 图 12.14 所 示 。 
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图 12.13 带 有 地 点 标记 的 地 图 图 12.14 地 图 上 的 控件 


代码 12.12 ”使 用 地 图 控件 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile 插件 </title> 
<meta charset="utf-8" /> 
<script src: s/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script sr js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<style> 
#map-canvas { 
width: 100%; 
height: 450px; 


minheight: 350px; 
} 
</style> 
<script src="http://maps.google.cn/maps/api/js"></script> 
<script> 
Var center peopleSquare = new google.maps.LatLng(31.229335, 121.474573); 
function initialize() { 
Var mapOptions = { 
center:center peopleSquare, 
zoom:16, 
mapTypeId:google.maps.MapTypeId.ROADMAP, 
zoomControl:true, 
mapTypeControl:true, 
scaleControl:true, 


streetViewControl:true 
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jx 
Var map = new google.maps.Map (document .getElementById( 
"map-canvas"), mapOptions); 
} 
google.maps .event .addDomListener (window, 'load', initialize); 
</script> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<hl>Google 地 图 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div id="map-canvas"></div> 


</div> 
</div> 
</body> 
</html> 
12.5 本 章 习 题 
编程 题 


(1) 修改 代码 12.8， 使 每 一 幅 图 片 真 正 占用 100% 屏 幕 宽 度 (图 片 与 浏览 器 边缘 不 留 空白 )。 

(2) 设计 一 个 如 图 12.15 所 示 的 网 页 表单 ， 当 用 户 已 经 选择 同意 服务 协议 的 时 候 ， 点 击 表 
单 中 的 “发 送 ” 按 钮 ， 屏 幕 显示 信息 “表单 已 发 送 ”。 而 当 同 意 协议 的 选项 还 没有 被 选择 的 时 
候 ， 点 击 “ 发 送 ”按钮 ， 将 弹出 一 个 对 话 窗口 ， 询 问 用户 是 否 同意 服务 协议 ， 根 据 用 户 的 选择 ， 
屏幕 上 显示 “表单 已 提交 。?” 或 者 “您 拒绝 了 服务 协议 ， 表 单 未 提交 。” 。 


jamwetnopme/cmiz 克 置 cooue 】 


Windows (mDL... 


同意 月 务 协议 ? 
更 绝 


图 12.15 题 (2) 图 
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本 书 第 1.4.3 小 节 介绍 了 Apache httpd 服务 器 的 安装 和 基本 的 配置 方法 。jQuery Mobile 的 
Ajax 页 面 加 载 过 程 需要 Web 服务 器 的 支持 。 学 习 jQuery Mobile 移动 网 页 开发 ， 一 个 Web 服 
务 器 是 必须 具备 的 条 件 之 一 。 除 了 支持 jQuery Mobile 的 页 面 加载 过 程 ， 使 我 们 建立 一 个 本 地 
的 测试 环境 ， 以 及 支持 jQuery Mobile 网 页 在 模拟 器 中 运行 以 外 ，Web 服务 器 还 能 够 帮助 我 们 
把 网 页 真正 发 布 到 Internet 上 ， 这 样 ， 我 们 就 能 够 在 真正 的 手机 上 测试 网 页 在 不 同 移动 设备 上 
的 实际 运行 效果 了 。 本 附录 将 介绍 把 Web 服务 器 部 署 到 Internet 上 的 方法 。 

在 着 手 部 署 Web 服务 器 之 前 ， 读 者 务必 先 在 本 地 计算 机 上 完成 Web 服务 器 的 基本 安装 和 
配置 。 配 置 方法 可 以 参照 本 书 1.4.3 小 节 中 的 过 程 ， 或 者 选用 任何 一 个 读者 熟悉 的 Web 服务 器 
产品 。 另 外 ， 由 于 本 附录 的 内 容 涉 及 了 一 些 软 硬 件 产品 ， 这 些 应 用 环境 可 能 与 读者 正在 使 用 的 
软 硬 件 产品 不 同 ， 因 此 ， 读 者 在 按照 本 附录 设置 Web 服务 器 环境 的 同时 ， 也 需要 参考 自己 正 
在 使 用 的 产品 手册 ， 比 如 路 由 器 的 配置 方法 ， 就 会 随 着 路 由 器 产品 的 品牌 和 型 号 不 同 而 有 所 不 
同 。 下 面 介绍 在 Windows 8.1 上 建立 Web 服务 器 的 过 程 。 


1. 确认 本 地 Apache 服 务 器 已 经 正确 安装 
在 Windows 8.1 环境 下 ，Apache httpd 服务 器 的 默认 安装 路 径 是 : 
C:\Program Files (x86)\Apache Group\apache2 


下 面 简称 这 个 安装 路 径 为 <apache_root>。 
在 Apache 服务 器 的 配置 文件 的 路 径 <apache_root>/conf 下 找到 配置 文件 httpd.conf。 
打开 配置 文件 ， 并 检查 用 于 存放 网 页 文件 的 根 路 径 ， 如 图 A.1 所 示 。 


1 
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图 A.1 配置 Apache 服 务 器 的 网 页 文件 根 路 径 
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在 图 A.1 中 ,用 于 部 署 网 站 的 根 路 径 分 别 通过 下 面 两 行 来 配置 。 通 过 关键 字 ， 很 容易 找到 
这 两 行 : 

DocumentRoot "C:/www" 

<Directory "C:/www"> 

在 本 例 中 ， 我们 所 有 用 于 测试 的 网 站 文件 将 被 放置 在 C:/www 目录 中 。 这 个 目录 我 们 将 简 
称 为 <www>。 为 了 测试 网 站 的 运行 状态 ， 在 该 根 目录 下 建立 一 个 测试 文件 index.html。 一 旦 用 
户 访 问 Web 服务 器 ，index.html 将 被 自动 载 入 浏览 器 
中 。 通常 ， 在 一 个 网 站 中 ，index.html 文件 会 包含 比较 
丰富 的 内 容 ， 用 于 说 明 网 站 的 主要 用 途 和 其 他 重要 信 
息 。 如 果 仅 仅 是 为 了 测试 服务 器 的 工作 状态 ， 只 要 在 
网 页 中 输出 简单 的 “Hello World!” 就 足够 了 。 

在 屏幕 右 下 角 的 状态 栏 中 找到 Apache 服 务 器 的 图 
标 ， 单 击 图 标 ， 并 确认 服务 器 处 于 运行 状态 ， 如 图 A.2 
所 示 。 如 果 服 务 器 的 配置 文件 刚刚 做 了 修改 ， 通 过 同 
样 的 控制 界面 重新 启动 服务 器 ， 使 最 新 的 配置 生效 。 

以 上 检查 步骤 一 切 正常 后 ， 我 们 就 可 以 在 本 地 测 
试 服务 器 了 。 现 在 ，Apache 服务 器 还 没有 部 署 到 Internet 上 ， 和 暂时 还 只 能 在 本 地 运行 。 在 浏览 
器 中 输入 “http:/localhost”， 浏 览 器 中 应 该 立即 显示 我 们 的 测试 主页 。 看 到 浏览 器 的 测试 结果 
以 后 ， 我 们 就 能 确定 服务 器 的 工作 状态 是 否 已 经 正常 了 。 

2. No-IP 新 用 户 注册 


国内 和 国外 有 很 多 公司 提供 域名 注册 服务 。 一 个 .com 域名 大 概 需要 10 美元 左右 的 年 费 。 
- 些 特殊 域名 的 年 费 还 需要 更 高 。 为 了 在 Intemet 上 测试 jQuery Mobile 网 页 ， 一 个 免费 的 二 级 
域名 就 足够 了 。 一 些 域名 注册 服务 公司 同时 也 提供 免费 的 三 级 域名 注册 服务 。 
这 里 介绍 No-IP 公司 (noip.com) 的 免费 域名 注册 方法 。 使 用 No-IP 公司 的 服务 ， 首 先 需 要 
在 No-IP 的 网 站 是 注册 一 个 账号 。 图 A.3 是 No-IP 公司 的 主页 。 


A.2 ”Apache 服务 器 的 控制 界面 


Free Dynamic DNS- Mar x 


€ 3 Dwwwnoipcom 


DynamicDNS 。 Managed DNS Domains Sevices WhyUs? Support 


后 nap 


图 A.3 ”No-IP 公 司 主页 上 的 注册 和 登录 按钮 
点 击 主页 上 的 Sign Up 按钮 ， 进 入 新 用 户 注册 页 面 ， 如 图 A.4 所 示 。 
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Thinking about uperading? 


Upgrade to No-P Enhenced for Nore Hostnames ard Lass Hassles 


图 A.4 新 用 户 注册 

No-IP 的 新 用 户 注册 流程 可 以 把 一 个 用 户 账号 注册 为 增强 型 或 者 免费 账号 。 两 者 都 能 够 使 
用 No-IP 的 免费 域名 服务 ， 但 是 ， 免 费 账号 同时 只 能 申请 3 个 免费 域名 。 我 们 只 需要 一 个 免费 
域名 ， 就 已 经 能 够 满足 本 书 中 练习 的 需要 了 。 当 完成 新 用 户 注册 以 后 ， 就 可 以 通过 公司 主页 上 
的 Sign in 按钮 登录 了 。 

3. 申请 免费 域名 

登录 No-IP 公司 的 网 站 以 后 ， 在 网 站 的 菜单 上 点 击 Hosts / Redirects， 进 入 主机 列表 页 面 ， 
如 图 A.5 所 示 。 进 入 页 面 后 ， 通 过 页 面 上 的 Add a Host 按钮 增加 一 个 新 的 主机 。 


图 A.5 主机 列表 页 面 


如 果 一 个 No-IP 用 户 已 经 拥有 了 若干 免费 域名 ,图 A.5 会 列 出 当前 由 No-IP 管理 的 所 有 主 
机 域名 及 其 主机 IP 地 址 。 对 于 一 个 新 用 户 来 说 ， 还 没有 设置 任何 主机 ， 就 会 得 到 如 图 A.5 那 
样 的 空白 列表 。 
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在 图 A.6 的 “新 增 主 机 ”页 面 中 ， 首 先 需 要 为 新 的 主机 指定 一 个 主机 名 ， 读 者 可 以 任意 选 
择 一 个 既 容 易 记 住 ， 又 便于 在 手机 上 输入 的 名 称 。 然 后 需要 为 新 的 主机 指定 一 个 域名 。 

No-IP 把 所 有 的 免费 域名 放 在 下 拉 列 表 的 No-IP Free Domains 下 面 。 

图 A.6 中 ， 使 用 了 主机 名 “jqm” 和 免费 域名 “noip.me”。 在 设置 新 的 主机 时 ，No-IP 网 
站 假定 新 的 主机 和 用 户 当前 正在 使 用 的 计算 机 处 于 同一 个 局 域 网 中 ，No-IP 网 站 能 够 自动 识别 
用 户 当前 的 下 地址 并 显示 在 IP Address 中 。 用 户主 机 可 能 处 于 一 个 动态 上 ，DNS 服务 器 需 
要 随时 更 新 ， 因 此 新 增 主 机 过 程 中 的 下 地 址 并 不 重要 。 


应 ne-p Members Porat M x 


€ 3 C 四 viawerksntemetsoluuons ULEIUSI nrtps//wwwnoipcomymembervydns/hostphr 


Hosts/Redirects Adda host 
Fi outme ohowng elos to contg. er ou are gone diox Craate Host oad your host 
hadHost 
< Own a domain name? 


Use ycur own domain name wih our DNS systom. 244 or Fie aisler your domain name now or rsad mere for pricing and 
Teaiures， 


Manage Hoss 


EF 
Need Help? At 


多 ons 
Supoon Centet rr 


PAddress: 1350. 
Assign to Groupe 


EEnable Widcard 。 wiidcarda are a Plus/ Enhanced ‘eature. upara| 


+ Acceot Mall Tor your Domain 
LatNo:P go ne ainywork Setup PCP orDmardna or your name. 


图 A.6 为 新 增加 的 主机 绑 定 域名 


图 A.6 中 的 Assign to Group 用 于 No-IP 对 用 户主 机 动态 人 P 地 址 的 管理 和 更 新 。 用 户 只 需 
要 通过 Configure Groups 增加 一 个 组 , 并 把 当前 正在 申请 过 程 中 的 主机 和 任意 一 个 组 绑 定 即 可 。 

图 A.6 显示 了 当前 已 经 拥有 了 一 个 组 group1， 并 且 从 下 拉 列表 中 选择 了 这 个 组 ， 把 主机 
jqm.noip.me 与 group 1 绑 定 。 

新 增 主 机 页 面 的 下 半 部 分 是 Mail Options， 其 中 的 MX Record 仅 在 为 一 个 主机 设置 邮件 服 
务 器 时 使 用 。 一 般 在 个 人 服务 器 上 很 少 安装 邮件 服务 器 ， 因 为 Internet 服务 商 (ISP) 为 了 防止 垃 
圾 邮件 服务 器 小 发 邮件 ， 通 常 都 会 对 邮件 服务 器 使 用 的 端口 设置 限制 ， 也 就 是 说 ， 大 多 数 家 用 
网 络 无 法 使 用 邮件 服务 器 的 端口 。 另 外 ， 很 多 邮件 服务 器 为 了 防止 收 到 垃圾 邮件 ， 直 接 屏蔽 来 
自动 态 P 地 址 的 邮件 服务 器 发 出 的 邮件 。 本 书 不 涉及 电子 邮件 服务 ， 读 者 不 需要 对 这 一 部 分 
进行 设置 。 

当 一 切 设置 就 绪 后 ， 点 击 Add Host 完成 增加 主机 的 过 程 。 这 时 ，No- 卫 网 站 显示 当前 的 主 
机 列表 ， 如 图 A.7 所 示 。 
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(2 No-lp Members Portak Nt x 


4 CC |@ Vitalwerks Internet Solutions LLC [US] https://www.noip.com 上 


Hosts/Redirects Manage Hosts 


Oe 


Current Hosts: 1 Need More Hosts? Enhance Your Account! 


Host IPURL 


图 A.7 主机 设置 完成 以 后 的 主机 列表 


4. 安装 DNS 更 新 工具 

由 于 大 部 分 Internet 用 户 使 用 的 是 动态 人 ， 最 新 的 I 了 P 地 址 必须 随时 在 DNS 中 进行 更 新 ， 
否则 ， 一 旦 主机 的 了 P 地 址 发 生 了 变化 ， 在 Intemet 上 的 其 他 用 户 将 无 法 访问 主机 。No-IP 提供 
了 动态 卫 更 新 工具 ， 它 能 够 定时 检测 IP 地 址 的 变化 ， 并 且 自 动 更 新 DNS。 图 A.7 中 ， 在 左 侧 
的 菜单 中 找到 并 点 击 Download Client， 进 入 DNS 工具 下 载 页 面 ， 下 载 并 在 Web 服务 器 所 在 的 
计算 机 上 安装 DNS 工具 。 安 装 完成 后 DNS 工具 会 自动 打开 ， 如 图 A.8 所 示 。 


全 noip 


Sign In 


图 A.8 DNS 工具 安装 以 后 的 登录 界面 
No-IP 网 站 允许 注册 用 户 使 用 用 户 的 电子 邮件 地 址 或 者 用 户 名 登录 , 而 No-IP 的 DNS 更 新 
工具 则 稍 有 不 同 。 某 些 版 本 的 工具 软件 仍然 允许 电子 邮件 作为 用 户 名 ， 最 新 的 版 本 只 允许 使 用 
用 户 名 。 如 果 读 者 在 前 几 年 前 已 经 注册 了 No-IP 账号 ( 仅 适用 于 No-IP 的 老 用 户 )， 但 是 还 没有 
使 用 用 户 名 , 那么 可 以 在 登录 No-IP 网 站 后 , 在 网 站 的 左上 角 找到 Account( 账 号 )， 并 完成 对 用 
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户 账号 的 更 新 ， 以 及 设置 用 户 名 。 
No-IP 用 户 第 一 次 登录 DNS 更 新 工具 时 , 会 看 到 如 图 A.9 所 示 的 界面 ， 显 示 当 前 还 没有 主 
机 需要 被 动态 更 新 。 


File Edit Tools Help 
Status 


WY Mtn Fite 
4 Updating: 0 Groups & 0 hosts 
P150105141. @ [Refesh Now 


4:28 PM: Remote IP Found: 135.0.105.141. QONotices ~ 


图 A.9 DNS 工具 软件 的 用 户 界面 


点 击 DNS 工具 的 Edit Host 按钮 ， 进 入 如 图 A.10 
所 示 的 主机 选择 界面 。No-IP 对 主机 IP 地 址 的 管理 不 
是 为 每 一 个 主机 单独 操作 的 ， 而 是 通过 新 增 主机 过 程 
中 的 分 组 ， 对 一 个 组 中 的 所 有 主机 同时 进行 更 新 的 。 
因此 ， 如 果 读 者 使 用 多 个 局 域 网 ， 每 一 个 局 域 网 有 一 
个 Internet 上 的 有 效 瑟 地 址 ， 那 么 ， 每 一 个 局 域 网 中 
都 可 以 有 一 台 计算 机 作为 Web 服务 器 , 并 且 把 每 一 个 
局 域 网 中 的 主机 分 到 同一 个 组 中 。 

在 图 A.10 的 界面 中 ,选择 “group1”, 点击 Save 
按钮 保存 设置 ,最 新 的 设置 将 立即 生效 ,No-IP 的 DNS 
更 新 软件 会 立刻 检测 当前 的 瑟 地 址 ， 并 为 groupl 中 


Please select the hosts or groups to be 
assodated with this dient. You can dkck here 


的 所 有 主机 域名 更 新 DNS。 
5. 在 局 域 网 中 指定 Web 服 务 器 口 show only selected hosts 
二 沙 雪 于 成 本 主 机 与 P 地 址 的 关联 。 癌 Require a password to modify hosts 
当 一 个 用 户 在 Intemet 上 访问 主机 ， 比 如 我 们 刚 [sae 二 


刚 注册 的 jqm.noip.me 时 ，DNS 会 把 访问 引 向 相关 联 
的 也 地 址 。 由 于 Web 服务 器 所 在 的 局 域 网 在 Intermet A.10 选择 需要 动态 更 新 DNS 的 主机 
上 共用 一 个 下 地址 ， 为 了 使 从 Intemet 来 的 访问 到 达 
正确 的 Web 服务 器 ， 还 需要 设置 路 由 器 。 

在 设置 路 由 器 之 前 ， 首 先 需要 确定 Web 服务 器 所 在 的 计算 机 在 局 域 网 中 的 他 地 址 。 利 用 
Windows 操作 系统 的 ipconfig 命令 ， 就 能 实现 这 个 目的 。 

命令 行 中 的 ipconfig 命令 能 够 显示 每 一 个 网 卡 当前 占用 的 他 地 址 和 使 用 的 网 关 地 址 。 

图 A.11 显示 了 在 Windows 8.1 的 命令 行 中 得 到 的 当前 计算 机 的 在 局 域 网 上 的 人 P 地 址 。 

图 中 很 明确 地 显示 了 当前 在 无 线 网 卡 上 的 局 域 网 IP 地 址 192.168.1.113， 以 及 网 关 占 用 的 
地 址 192.168.1.1。 
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Command Prompt 


6-3-9699] 
tion- All rights 


frea Connectionx 12: 


: Media disconnected 


Network 


nnected 


edia disconnected 


4-B5BE-67D1E45E44h087 : 


edia disconnected 


4:3e10:3f57: 
57:fe8ex8 


图 A.11 ”通过 命令 行 中 的 ipconfig 命 令 得 到 当前 的 计算 机 在 局 域 网 上 的 IP 地 址 
i HTTP 标准 ，Web 服务 器 对 应 的 HTTP 服务 使 用 端口 80。 当 一 个 从 Internet 上 来 的 
Web 请 求 到 达 路 由 器 以 后 ， 路 由 器 必须 把 该 请 求 转发 到 局 域 网 中 的 Web 服务 器 。 现 在 ， 我 们 
已 经 获得 了 Web 服务 器 在 局 域 网 上 的 人 P 地 址 ， 下 一 步 就 是 需要 配置 路 由 器 ， 使 所 有 对 80 端 
口 的 访问 转发 到 Web 服务 器 所 在 的 下 地址 : 192.168.1.113。 
不 同 品牌 和 型 号 的 家 用 路 由 器 在 管理 员 界 面 上 会 有 很 大 不 同 。 但 是 ， 如 果 仔 细 查 看 路 由 器 


的 各 个 配置 页 面 ， 其 实 留 给 用 户 的 配置 选项 是 大 同 小 异 的 。 下 面 以 LinkSys 路 由 器 为 例 ， 介 绍 
按照 端口 转发 网 络 请 求 的 配置 方法 。 

根据 ipconfig 返回 的 信息 ， 我 们 已 经 知道 ， 当 前 局 域 网 的 网 关 地 址 是 192.168.1.1。 在 浏览 
器 中 访问 这 个 他 地址， 浏览 器 将 显示 路 由 器 的 登录 界面 。 输 入 路 由 器 的 用 户 名 和 密码 (每 个 品 
牌 的 路 由 器 都 有 各 自 的 默认 用 户 名 和 密码 。 如 果 路 由 器 由 ISP 提供 ， 则 应 当 参 考 ISP 提供 的 用 


户 手册 。 用 户 也 可 能 在 第 
义 的 用 户 名 和 密码 了 )。 


-次 


LinkSys 路 由 器 关于 端口 转发 
然后 点 击 Single Port Forwarding 得 到 ， 
在 图 A.12 中 ， 从 页 面 左 侧 的 


以 


写 External Port、Internal Port, 


由 于 


使 用 路 由 器 的 时 候 更 改 默认 密 码 ， 


-使 用 的 80 端口 属于 HTTP 协议 标准 的 


这 时 候 ， 就 需要 输入 用 户 自 定 


的 界面 可 以 通过 点 击 网 页 菜单 上 的 Applications & Gaming， 
如 图 A.12 所 示 。 

Application Name 下 拉 列 表 中 选择 HITP, 配置 界面 将 自动 填 
及 Protocol 三 项 。 


部分， 用户 不 需要 对 自动 填写 的 内 容 做 任何 
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更 改 。 在 同一 行 中 的 To IP Address 是 指 需 要 把 HTTP 访问 转发 到 的 目标 卫 地 址 ， 我 们 需要 填 
写 Web 服务 器 在 局 域 网 上 的 地 址 ( 即 由 ipconfig 命令 返回 的 Web 服务 器 地 址 )。 
最 后 ， 在 Enabled 选项 上 打 勾 ， 并 保存 设置 ， 路 由 器 即 设置 完成 。 


™ Applications & Gaming-s x oO 
人 © (D192.168.1.1/index.stm?title 


Applications & 


Gaming Setup Wireless Security AccessRestrictions i 


Administration 


Singke Port Forwarding | 1 1 


Single Port Forwarding 


Application Name | | External port | Internal Port | Protocol | TolPAddress |Enabled 


rrp vl | 80 | 80 192.168.1.1113 ahN 


None i 192.168.1.|113 


None 192.168.1 


None 192.168.1 


" 
" 
" 
" 


-一 192.168.1 


192.168.1 


192.168.1 


图 A.12 ”设置 路 由 器 的 端口 转发 功能 


6. 设置 Windows 防 火 墙 


Windows 操作 系统 的 防火 墙 在 默认 情况 下 ， 对 访问 
本 地 80 端口 的 访问 加 以 限制 。 当 把 一 个 计算 机 变 成 一 台 CE 
Web 服务 器 以 后 ， 必 须 允 许 对 80 端口 的 访问 请 求 。 

在 Windows 8.1 中 ,通过 控制 面板 可 以 设置 防火 墙 。 

首先 ， 通 过 Windows 8.1 的 查找 功能 ， 搜 索 关键 字 

“firewall”， 如 图 A.13 所 示 。 

Windows 会 自动 地 列 出 与 防火 墙 相关 的 若干 配置 程 
序 。 点 击 Windows Firewall 进入 防火 墙 配置 界面 。 在 如 
图 A.14 所 示 的 Windows 防火 墙 界面 中 的 左 侧 一 栏 ， 点 
击 Advanced Settings( 高 级 设置 )。 

然后 在 Windows 高 级 设置 界面 中 的 左 侧 单 击 
Inbound Rules, 并 在 同一 界面 的 右 侧 单 击 New Rule( 新 规 A.13 ”查找 防火 墙 设置 选项 
则 )， 如 图 A.15 所 示 。 

在 下 一 步 的 规则 类 型 选择 中 ， 选 取 Port( 端 口 )， 点 击 Next( 下 一 步 ) 按 钮 进入 端口 配置 程序 。 

在 如 图 A.16 所 示 的 端口 配置 界面 中 ， 分 别 选择 TCP 协议 和 Specify Local Ports( 指 定 本 地 
端口 )， 并 且 输 入 端口 号 “80”， 单 击 Next 按钮 进入 下 一 步 ， 如 图 A.17 所 示 ， 选 择 Allow the 
Connection( 人 允许 连接 )。 

最 后 连续 单 击 Next 按钮 两 次 ， 结 束 防火 墙 的 配置 。 
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个 蛤 ControlPanel ，All Control panal tems » Windows Firewall vo Search Control Panel 


ER Help protect your PC with Windows Firewall 


Windows Firewall can help prevent hackers or malicious software from gaining access to your PC through the 
Allow an app or feature Intemet or a network. 
through Windows Firewall 


六 Change notification settings ®@ Private networks Connected © 
和 Tum windows Firewall on or 
off 


Networks at home or work where you know and trust the people and devices on the network 


\ hat Windows Firewall state: on 


9 Incoming connections: Block all connections to apps that are not on the it 
Troubl my network of allowed apps 


Active private networks: 于 JavaBean 
Notification state Notify me when Windows Firewall blocks a new app 


图 名 Guestor pubtic rerworts Not connected © 


See also 
Action Center 
Network and Sharing Center 


A.14 ”在 Windows 防 火 墙 的 主 界面 上 选择 高 级 设置 功能 


Connection Securrty Rule 


到 Monioing ae 


sms- 安 法 
网 3e0 交 全 了 十- 交 
O02 Ltd 
Ors tttas 
加 60 安全 了 于 寺 生 天 


Acer ockup Meneor 


@ Acer Eactup Manage - Sevice 
« PPE 


A.15 ”进入 新 建安 全 规则 界面 


Protocol and Ports 

Speciy the protocols and ports to which this rule applies. 

Sieps- 

© Rue Tipe Doesthis rde applyto TCP or UDP? 
二 Protocol and Ports ® TCP 

Acton O upe 

0 Profie 

©» Name 


Does this rule apply to al local pos or speciic local pots? 


DO Mllocal ports 
图 Speciiclocal ports: |30 
Example: 80. 443, 5000.5010 


图 A.16 配置 HTTP 使 用 的 80 端口 
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Action 
Speciy the action to be taken when a connection matches the condiions speciied in the rie. 


Steps- 
© Rie pe What acton shoud be taken when a connecton matches the specfied condtons? 
Protocol and Pots YF 

上 Alow the connecion 
Wi, Ths ndludes connechons that are protected wth IPsec as wel as those are not 
二 Profie 


© Mlow the connection ft is secure 
ed This ncludes only comnections that have been authenticated by using IPsec. Connections 

wil be secured usng the settngs mn IPsec properies and res n the Connechon Securty 
Rule node. 


图 A.17 防火墙 规 则 为 “允许 连接 ” 


7. 在 移动 设备 上 测试 
至 此 , 我 们 的 Web 服务 器 已 经 被 部 署 到 Internet 上 ， 并且 已 经 能 够 被 世界 上 所 有 的 用 户 访 
问 了 。 为 了 确信 服务 器 工作 一 切 正常 ， 我们 可 以 把 本 书 中 的 一 些 实例 部 署 到 服务 器 上 ， 比 如 把 
第 5 章 的 实例 复制 到 C:vwwwNjqmCHO05 目录 下 。 
由 于 网 页 文件 在 Web 服务 器 上 的 根 目 录 是 Ci:www， 因 此 ， 第 5 章 中 的 所 有 实例 程序 在 
Internet 上 的 网 址 都 是 以 http://jqm.noip.me/jqm/CH05/ 开 始 的 。 在 手机 的 浏览 器 中 输入 第 5 章 的 
-个 实例 HTML 文档 jqm_dialog_new.html 的 网 址 ， 该 文档 能 够 在 手机 上 正常 打开 ， 如 图 A.18 


所 示 。 服 务 器 配置 成 功 。 


十 jam.noip.me/jqm/CHOS/jqm_dial. 
© 确认 
请 确认 订单 ? 
砚 认 订单 取消 订单 


入 


图 A.18 ”在 手机 上 验证 Web 服 务 器 配置 成 功 
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附录 B 习题 解答 


第 1 章 移动 Web 开 发 简介 


()B 
“优雅 降级 ”的 出 发 点 是 尽量 提供 更 多 的 功能 ， 并 在 此 基础 上 对 不 具备 某 些 特性 的 浏览 器 

实施 “降级 ”。“ 渐 进 增强 ”的 出 发 点 是 满足 共性 ， 并 根据 浏览 器 的 特性 进行 “增强 ”。 

Q2)B 

离线 功能 不 但 需要 一 个 Web 服务 器 ， 还 需要 对 具体 的 离线 资源 进行 配置 。 

Bye DD 

部 分 Blackberry 和 Android 设备 上 的 硬件 按钮 实现 的 功能 需要 具体 的 硬件 设备 来 测试 。 

Opera 只 是 众多 浏览 器 中 的 一 种 。Safari 和 Chrome 等 浏览 器 把 某 些 HTML 标签 或 者 CSS 
样式 通过 不 同 的 方式 显示 出 来 。 

(9) D 

过 度 追 求 高 分 辨 率 会 使 文字 过 小 ， 无 法 辨认 。 

(5) A 

jQuery Mobile 依赖 于 jQuery。 

(6) B 

jQuery Mobile 采用 的 自 适应 设计 和 渐进 增强 策略 在 网 页 显示 时 , 会 根据 设备 和 浏览 器 的 实 
际 情况 做 出 调整 。 

[oe 

B 级 浏览 器 支持 除了 Ajax 以 外 的 所 有 其 他 A 级 浏览 器 所 具备 的 功能 。 

(8) BC 

jQuery Mobile 采用 了 自 适 应 和 渐进 增强 实际 策略 。 


第 2 章 HTML 5 开发 基础 


(IACDESG 


(2)BF HI 
(G3) D 
HTML 5 中 的 定制 属性 以 “data-” 为 前 绥 。 
(人 D 
<address> 标 签 应 该 仅 作为 联系 地 址 使 用 。 
(5) B 


<button> 按 钮 在 表单 内 与 表单 外 具有 不 同 的 行为 特点 。 当 一 个 <button> 出 现在 表单 内 时 ， 
默认 的 功能 是 发 送 表单 。 

(OC 

HTML 5 要 求 <title> 元 素 必须 出 现 ， 而 且 必须 出 现在 <head> 元 素 中 。 
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Cp 

本 题 中 出 现 的 3 种 布尔 型 属性 的 标注 方法 是 等 价 的 。 
(8) A B 

(OW 

在 双 字符 格式 的 语言 代码 后 面 允 许 使 用 国家 代码 后 级 。 
(10) C 


通过 粘贴 方式 发 送 的 HTML 文档 不 具有 原始 文件 具有 的 文件 编码 信息 。 
第 3 章 CSS 3 设计 基础 


(1) D 

“::” 是 伪 元 素 的 标记 ， 但 是 并 不 存在 ::first-paragraph 这 个 伪 元 素 。 

wy 

3) 'C 

padding 的 简写 形式 带 有 两 个 参数 时 ， 第 一 个 属性 值 代表 上 边 和 下 边 ， 第 二 个 属性 值 代表 
左边 和 右边 。 


(WD 
border-style 属性 也 需要 设置 才能 使 边框 可 见 。 
(5) B 
(6) D 
visibility: hidden; 方 法 会 保留 <div> 隐 藏 之 前 占用 的 屏幕 空间 。 
(7) B 
(8) A 
:first-child 与 :nth-child(1) 作 用 相同 ， 都 表示 第 一 个 子 节点 。 
(1) 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 习 题解 答 </title> 
<style> 
body { 
margin: 0; 
} 
.toolbar { 
position: fixed; 
width: 100%; 
height: 45px; 
background-color: #DDDDDD; 
text-align: center; 
} 
-footer { 
bottom: 07 
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-toolbar>hl, -toolbar>h2， .toolbar>h3, 
.toolbar>h4, .toolbar>h5, -toolbar>h6 { 


font-size: 1.2rem; 
font-weight: normal; 
margin-top: 12px; 
} 
</style> 
</head> 
<body> 


<div class="header toolbar"> 
<hl>Hello World</h1l> 

</div> 

<div class="content"> 
</div> 

<div class="footer toolbar"> 
</div> 

</body> 
</html> 
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(1) 了 
子 元 素 选择 器 遵循 CSS 的 索引 值 定义 方法 ， 从 “1” 开 始 。 
(2) B 
(3) Cc 
(过 


即使 这 两 个 方法 的 作用 相同 ， 但 是 在 使 用 方法 上 非常 不 同 。 使 用 时 ， 一 定 要 注意 哪 一 个 参 
数 是 指 被 插入 的 元 素 。 

[© 

(6) A C 

(7) B 

(8) A 

(9) A 

prop(“checked”) 和 is(“:checked”) 都 是 有 效 的 方法 。 

(10) C 
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(D) B 

jQuery Mobile 中 大 量 使 用 了 以 “data- ”为 前 绥 的 属性 。 这些 属 性 属于 HTML 5 的 扩展 属性 。 
HTML 4.01 中 没有 相关 的 语法 。 

站 它 

(G3) A 

答案 B 适用 于 jQuery Mobile 1.3， 在 jQuery Mobile 1.4 中 已 经 不 再 使 用 这 种 方法 。 

(4) A 
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(5) C 

属性 “role” 属 于 WAI-ARIA。 

(6) A 

默认 的 动画 效果 为 “fade”， 因 此 ， 即 使 不 为 data-transition 属性 赋值 ， 仍 然 会 有 一 个 不 太 
明显 的 动画 效果 。 

(7) B 

jQuery Mobile 1.4 仅 提 供 了 两 个 样本 主题 。 

(8) C 

(9) D 

(10) B 


第 6 章 UI 组 件 - 工具 栏 


CD 旋 
(2) 
(3) 
(4) 
(5) 
(6) B 
页 头 中 是 否 出 现 系统 自动 添加 的 返回 按钮 ， 取 决 于 页 面 访问 的 历史 记录 。 
(7) A 
(8) D 
(9) B 
(10) A 


第 7 章 jQuery Mobile 的 UI 组 件 


DODUDN 


(1) 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link href="js/jquery-mobile-classic-theme/theme-classic.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="b"> 
<div data-role="header"> 
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<a href="#" class="ui-nodisc-icon" data-icon="bars™ 
data-iconpos="notext"™" data-corners="false"> 无 文字 </a> 
<h1> 按 钮 </h1> 
<a href="#" class="ui-nodisc-icon" data-icon="star™" 
data-iconpos="notext" data-corners="false"> 无 文字 </a> 
</div> 
<div class="ui-content" role="main"> 
</div> 
</div> 
</body> 
</html> 


2) 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 中 国电 影 金鸡 奖 </h1> 
</div> 
<div class="ui-content" role="main"> 
<table data-role="table" data-mode="columntoggle" 
id="golden rooster" class="ui-responsive" 
data-column-btn-text=" 选 择 表 列 . . .”> 
<thead> 
<tr> 
<th> 年 </th> 
<th data-priority: 
<th data-priority="1"> 最 佳 故 事 片 </th> 
<th data-priority="2"> 最 佳 导演 </th> 
<th data-priority="3"> 最 佳 男 主角 </th> 
<th data-priority="3 "> 最 佳 女 主角 </th> 
</tr> 
</thead> 
<tbody> 
SE 
<td>1981</td><td>1</td> 
<td>《 巴 山 夜 雨 》<br>《 天 云 山 传奇 》</td> 
<td> 谢 晋 </td><td>--</td><td> 张 瑜 </td> 
E> 
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E> 
<td>1982</td><td>2</td> 
<td>《 邻 居 》</td> 
<td> 成 昔 </td><td> 张 雁 </td><td> 李 秀明 </td> 
</tr> 
< 上 E 革 > 
<td>1983</td><td>3</td> 
<td>《 人 到 中 年 》<br> 《骆驼 祥子 》</td> 
<tq> 吴 贻 马 </td><td>--</td><td> 潘 虹 、 斯 琴 高 娃 </td> 
Cr 
E> 
<td>1984</td><td>4</td> 
<td>《 乡 音 》</tq> 
<tq> 汤 晓 丹 </td><td> 董 行 舍 、 杨 在 葆 </td><tq> 柳 雪 </td> 
</tr> 
<tr> 
<td>1985</td><td>5</td> 
<td>《 红 衣 少 女 》</td> 
<td> 凌 子 风 </td><td> 昌 了 晓 禾 </td><td> 李 羚 </td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> 
</body> 
</html> 


第 8 章 jQuery Mobile 的 UI 组 件 ( 续 ) 
1) 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 


<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 


<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 


<meta name="viewport" content="width=device-width,initial-scale=1.0"> 


<xstyle> 
#testarea { 
width: 100%; 
height: 20#; 
background-color: rgb(128, 128, 128); 
} 
</style> 
<script> 
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function setBrightness(grey) { 
$("#testarea") .css ("background-color", "rgb(" + grey + "," 
+ grey + "" + grey + ")"); 
了 
</script> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 滑 动 条 </h1> 
</div> 
<div class="ui-content" role="main"> 
<form target="#"> 
<div id="testarea">gnbsp;</div> 
<input type="range" name="brightness" id="brightness" 


value="]128" min="0" max="255" step="3 
onchange=setBrightness (this.value)> 
</form> 
</div> 
</div> 

</body> 

</html> 

(2) 

<!DOCTYPE html> 

<html> 

<head> 


<title>jQuery Mobile</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<h1> 列 表 视 图 </h1> 
</div> 
<div class="ui-content" role="main"> 
<ul data-role="listview" data-inset="true" 
data-filter="true" 
data-filter-placeholder=" 搜 索 景 点 . . ."> 
<1i><a href="#"> 北 京 故 宫 </a></1i> 
<1i><a href="#"> 北 京 天 坛 </a></1i> 
<1i><a href="#"> 北 京 颐 和 园 </a></1i> 
<1i><a href="#"> 北 京 圆明园 </a></1i> 
<1i><a href="#"> 苏 州 寒山 寺 </a></1i> 
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<1i><a href="#"> 苏 州 虎 丘 </a></1i> 
<1i><a href="#"> 苏 州 拙 政 园 </a></1i> 
<1i><a href="#"> 上 海 移 园 </a></1i> 
<1i><a href="#"> 沈 阳 故 宫 </a></1i> 
<1i><a > 沈阳 清 昭 陵 </a></1i> 
<li><a #"> 杭 州 西湖 </a></1i> 
<1i><a href="#"> 扬 州 瘦 西 湖 </a></1i> 
<1i><a href="#"> 南 京 中 山陵 </a></1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


(3) 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" id="myPage"> 
<div data-role="panel" id="myPanel 1"> 
<p> 面 板 1</p> 
<p> 
<a href="#myPage" data-rel="close" data-role="button" 
data-inline="true"> 关 闭 面板 </a> 


</p> 
</div> 
<div data-role="panel" id="myPanel 2" 
data-position="right" data-display="overlay"> 
<p> 面 板 2</p> 
<p> 
<a href="#myPage" data-rel="close" data-role="button" 
data-inline="true"> 关 闭 面板 </a> 
</p> 
</div> 
<div data-role="header"> 
<h1> 面 板 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="#myPanel 1" data-role="button" data-inline="true"> 


打开 /关闭 面板 1</a> 
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<a href="#myPanel 2" data-role="button" data-inline="true"> 
打开 /关闭 面板 2</a> 
</div> 
</div> 
</body> 
</html> 


第 9 章 jQuery Mobile 的 样式 定制 


样式 定义 练习 可 参照 本 书 9.3 节 中 介绍 的 方法 。 以 下 是 编程 题 的 参考 答案 。 
(D 


<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<style> 
.ui-btn.ui-corner-all { 
border-radius: 1.5em; 
} 
</style> 
</head> 
<body> 
<div data-role="page" id="myPage"> 
<div data-role="header"> 
<h1> 按 钮 </h1> 
</div> 
<div class="ui-content" role="main"> 
<a href="#" id="b2" data-role="button" data-inline="true"> 


圆 角 </a> 
</div> 
</div> 
</body> 
</html> 
CO) 
<!DOCTYPE html> 
<html> 
<head> 


<title>jQuery Mobile</title> 

<meta charset="utf-8" /> 

<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 

<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
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<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<link rel="stylesheet"™" 
href="themes/nativeDroid-master/css/jquerymobile.nativedroid.css"/> 
<link rel="stylesheet" href="themes/nativeDroid-master/css/ 
jquerymobile.nativedroid.1light.css"/> 
<link rel="stylesheet" href="themes/nativeDroid-master/css/ 
jquerymobile.nativedroid.color.blue.css" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" id="myPage"> 
<div data-role="header" data-position="fixed" 
data-tap-toggle="false" data-theme=' 
<hl>nativeDroid</h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#" data-icon="home" 
data-iconpos="top"> 主 页 </a></1i> 
<li><a href="#" data-icon="mail" 
data-iconpos="top"> 联 系 </a></1i> 
<li><a href="#" data-icon="search" 
data-iconpos="top"> 帮 助 </a></1i> 


</ul> 
</div> 
</div> 
<div class="ui-content" role="main"> 
</div> 
<div data-role="footer" data-position: 
data-tap-toggle="false" data-theme=' 
<div class="inset"> 
本 网 站 使 用 了 <a href="http://nativedroid.godesign.ch/" 
data-ajax="false">nativeDroid</a> 样 式 。 
</div> 
</div> 
</div> 
</body> 
</html> 


第 10 章 jQuery Mobile 功 能 扩展 


扩展 图 标 集 的 实验 操作 可 参考 本 书 10.1 节 中 介绍 的 方法 。 以 下 是 编程 题 的 参考 答案 。 
(D 

<!DOCTYPE html> 

<html> 

<head> 


<title>jQuery Mobile</title> 
<meta charset="utf-8" /> 
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<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 

<script sr js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 

<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 


<link href="IconFonts/font-awesome-4.3.0/css/font-awesome.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
</head> 
<body> 
<div data-role="page" id="myPage"> 
<div data-role="header" data-position="fixed" 
data-tap-toggle="false" data-theme="b"> 
<h1> 图 标 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#"> 
<div class="fa fa-plane"></div> 
<div> 飞 机 </div> 
</a></1i> 
<li><a href="#"> 
<div class="fa fa-ship"></div> 
<div> 轮 船 </div> 
</a></1i> 
<li><a href="#"> 
<div class="fa fa-train"></div> 
<qdiv> 火 车 </div> 
</a></1i> 
<li><a href="#"> 
<div class="fa fa-car"></div> 
<div> 汽 车 </div> 
</a></1i> 
</ul> 
</div> 
</div> 


<div class="ui-content" role="main"> 
</div> 
<div data-role="footer" data-position="fixed" 


和 5 


data-tap-toggle="false" data-theme=' 
<hl>gnbsp; </h1l> 
</div> 
</div> 
</body> 
</html> 


(2) 


/* 
data-transition="effect02" 
站 
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-effect02.in ， -effect02.out { 
-webkit-animation-timing-function: ease-out7 
-webkit-animation-duration: 400ms; 
-moz-animation-timing-function: ease-out; 
-moz-animation-duration: 400ms; 
animation-timing-function: ease-out; 
animation-duration: 400ms; 


.effect02.in { 
-webkit-transform: translate3d(0,0,0); 
-webkit-animation-name: slideinFromLeft; 
-moz-transform: translateXx(0); 
-moz-animation-name: slideinFromLeft; 
transform: translatex(0); 
animation-name: slideinFromLeft; 


@-webkit-keyframes slideinFromLeft { 
from { -webkit-transform: translate3d(-100%,0,0); } 
to { -webkit-transform: translate3d(0,0,0); } 


@-moz-keyframes slideinFromLeft { 
from { -moz-transform: translatex(-100%); } 
to { -moz-transform: translateX(0); } 


@keyframes slideinFromLeft { 
from { transform: translateXx(-100%); } 
to { transform: translatex(0); } 


-effect02.out { 
-webkit-transform: translate3d(100%,0,0); 
-webkit-animation-name: slideoutToRight; 
-moz-transform: translateX(100%) 7 
-moz-animation-name: slideoutToRight; 
transform: translatex(100%); 
animation-name: slideoutToRight; 


Q@-webkit-keyframes slideoutToRight { 
from { -webkit-transform: translate3d(0,0,0); } 
to { -webkit-transform: translate3d(100%,0,0); } 
} 
@-moz-keyframes slideoutToRight { 
from { -moz-transform: translatex(0); } 
to { -moz-transform: translatex(100%); } 
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} 

Q@keyframes slideoutToRight { 
from { transform: translatex(0); } 
to { transform: translatexX(100%); } 


.effect02.in.reverse { 
opacity: 1; 
—webkit-animation-duration: 225ms; 
-webkit-animation-name: fadein; 
-moz-animation-duration: 225ms; 
-moz-animation-name: fadein; 
animation-duration: 225ms; 
animation-name: fadein; 


@-webkit-keyframes fadein { 
from { opacity: 0; } 
to 1 opacitys 19 3 


@-moz-keyframes fadein { 
from { opacity: 0; } 
to t opacitys 1 


@keyframes fadein { 
Erom lt opacity O07 
to { opacity: 1; } 


.effect02.o0out.reverse { 
-webkit-animation-name: fadeout; 
-webkit-animation-duration: 100ms7 
-moz-animation-name: fadeout; 
-moz-animation-duration: 1l00ms; 
animation-name: fadeout; 
animation-duration: 100ms; 
opacity: 07 


@-webkit-keyframes fadeout { 
From { opacity: 1 } 
to { opacity: 0; } 


Q-moz-keyframes fadeout { 
from { opacity: 1; } 
to { opacity: 0; } 
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Q@keyframes fadeout { 
Erom I opacitys Tr 
to { opacity: 0; } 


第 11 章 jQuery Mobile 事 件 处 理 


(1 


<!DOCTYPE html> 
<html> 
<head> 

<title>jQuery Mobile - Events</title> 

<meta charset="utf-8" /> 

<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 

<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 

<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 

rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<script> 
$ (document) .on ("pagecontainerbeforehide", 
function(event, data) { 
if (data.nextPage.attr("id") == "page2") { 
Var newEontSize = $("input [name='fontSize'] :checked") .val (); 
$("#fontTest") .css("font-size", newFontSize); 
}; 
Ds; 

</script> 

</head> 


"home" data-role="page"> 
<div data-role="header" data-add-back-btn="true" 
data-back-btn-text=" 返 回 "> 
<h1> 字 体 设置 </h1> 
</div> 
<div class="ui-content" role="main"> 
<label for="fontSize-1l">lem</label> 
<input type="radio" name="fontSize" id="fontSize-1™" 
value="lem" checked=""> 
<label for="fontSize-2">2em</label> 
<input type="radio" name="fontSize" id="fontSize-2" value="2em"> 
<label for="fontSize-3">3em</label> 
<input type="radio™" name="fontSize" id="fontSize-3" value="3em"> 
<a href="#page2"” data-role="button"> 设 置 </a> 
</div> 
</div> 
<div id="page2" data-role="page"> 
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<div data-role="header" data-add-back-btn="true" 


data-back-btn-text=" 返 回 "> 
<h1> 字 体 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div id="fontTest"> 测 试 </div> 


习题 解答 


</div> 
</div> 
</body> 
</html> 
CO) 
<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile - Events</title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet"/> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<script> 
var YL V2s 
$ (document) .on ("vmousedown", function (event) { 
yl = event .pageYy; 
]) 7 
$ (document) .on ("vmousemove", function(event) { 
Y2 = event .pageYy; 
if ((Y2 一 YL) > 30) { 
YL = 2 
$ ("#infoArea") .text ("向 下 滑动 ") ; 
lelserif tty = yi < =30N 4 
YI = 2 
$ ("#infoArea") .text ("向 上 滑动 ") ; 
} 
Ds; 
</script> 
</head> 
<body> 


<div id="home" data-role="page"> 
<div data-role="header"> 
<h1> 垂 直 滑动 事件 </h1> 
</div> 
<div class="ui-content" role="main"> 
<div id="infoArea"></div> 
</div> 
</div> 
</body> 
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第 12 章 jQuery 和 jQuery Mobile 的 插件 


OD 


<!DOCTYPE html> 

<html> 

<head> 
<title>jQuery Mobile 插件 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 

rel="stylesheet" /> 

<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<link href="plugins/owl/owl-carousel/owl.carousel.css" rel="stylesheet" /> 
<link href="plugins/owl/owl-carousel/owl.theme.css" rel="stylesheet" /> 
<script src="plugins/owl/owl-carousel/owl.carousel.min.js"></script> 


<style> 
.Owl-carousel img { 
width: 100%; 
height: auto; 
} 
</style> 
<script> 


$ (document) .on ("pagecreate", function() { 
$(".owl-carousel") .owlCarousel ({ 
singleItem: true 
1); 
Ds; 
</script> 
</head> 
<body> 
<div data-role="page" data-theme="a"> 
<div data-role="header"> 
<hl>Owl] Carousel</h1> 
</div> 
<div class="ui-content" role="main"> 
<div style="margin:-lem;"> 
<div class="owl-carousel"> 
<div class="item"> 
<img src="images/beijing 01.jpg”alt=" 北 京 故宫 "> 
</div> 
<div class="item"> 
<img src="images/beijing_02.jpg”alt=" 北 京 天 坛 "> 
</div> 
<div class="item"> 
<img src="images/beijing 03.jpg"” alt=" 北 京 颐和园 "> 
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</div> 
<div class="item"> 
<img src="images/shanghai 01.jpg”alt=" 上 海 科技 馆 "> 
</div> 
<div class="item"> 
<img src="images/shanghai 02.jpg”alt=" 上 海 城 隐 庙 "> 
</div> 
<div class="item"> 
<img src="images/shenyang 01.jpg" alt=" 沈 阳 清 昭 陵 "> 
</div> 
<div class="item"> 
<img src="images/shenyang 02.jpg" alt=" 沈 阳 清 昭 陵 "> 
</div> 
<div class="item"> 
<img src="images/suzhou 01.jpg" alt=" 苏 州 木 渎 "> 
</div> 
</div> 
</div> 
</div> 
</div> 


</body> 
</html> 


<!DOCTYPE html> 
<html> 
<head> 


<title>jQuery Mobile 插件 </title> 
<meta charset="utf-8" /> 
<script src="js/jquery-1.10.1/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script> 
<link href="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css" 
rel="stylesheet" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<!-- Windows (mDialog) 系统 文件 ==> 
<script src="plugins/windows/js/jqm-windows.mdialog.js"></script> 
<!-— mDialog:Button --> 
<script> 
$ (document) .on ("tap", "#mySubmit", function() { 
Var myFlipSwitch = $("#termss and conditions"); 
Var messageDuration = 2500; 
if (myFlipSwitch.prop("checked")) { 
$ ("#result") .text (" 表 单 已 提交 。") ; 
$("#result") .show() 7 
$("#result") .fadeOut (messageDuration) 7 


} else { 
$("<div>") .mdialog({ 
useMenuMode: true, 


menuButtonType: "button'y 
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popDismissable: false, 

closeButton: true, 

menuHeaderText: ' 请 确认 '， 

menuSubtitle: “' 您 是 否 同意 服务 协议 ?'， 

menuMinWidth: '300px"', 

buttons: { 

' 同 意 ': { 
click: function () { 

myFlipSwitch.prop("checked", "true"); 
myFlipSwitch.flipswitch ("refresh"); 
$ ("#result") .text ("表单 已 提交 。") ; 
$("#result") .show(); 
$("#result") .fadeOut (messageDuration); 


}, 
"拒绝 ': { 
click: function() { 
myFlipSwitch.removeAttr ("checked"); 
myFlipSwitch.flipswitch ("refresh"); 
$ ("#result") .text ("您 拒绝 了 服务 协议 ， 表 单 示 提交 。") ; 
$("#result") .show() 7 
$("#result") .fadeOut (messageDuration); 
] 
icon: "delete", 


Ds; 
</script> 
</head> 
<body> 
<div data-rol page" id="mDialogDemol"> 
<div data-role="header"> 
<h1> 对 话 窗口 </h1> 
</div> 
<div class="ui-content" role="main"> 
<label for="termss_and conditions"> 同 意 服务 协议 ? </label> 
<input type="checkbox" data-role="flipswitch" 


name="termss and conditions" 
id="termss and conditions" 
data-on-text=" 同 意 ”data-off-text=" 拒 绝 "> 
<a href="#" id="mySubmit"” data-role="button"> 发 送 </a> 
<div id="result"></div> 
</div> 
</div> 
</body> 
</html> 
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